20201027赵鑫
学习总结
插槽slot
插槽用于决定将所携带得内容插入指定得某个位置,从而使模板分块,具有模块化得特质和更大得重用性。插槽显示或不显示、怎样显示都是由父组件控制得,而插槽在哪里显示由子组件决定
默认插槽
<div id="app">
<h1>我是父组件</h1>
<chachao>
<p>我是插槽</p>
</chachao>
</div>
<script src="vue.js"></script>
<script>
Vue.component("chachao",{
template:`
<div>
<h1>我是子组件</h1>
<slot></slot>
</div>
`
})
var vm = new Vue({
el:"#app"
})
插槽的默认内容
当父组件没有给插槽传值的时候插槽会显示默认内容
<div id="app">
<h1>我是父组件</h1>
<chachao>
<!-- <p>我是插槽</p> -->
</chachao>
</div>
<script src="vue.js"></script>
<script>
Vue.component("chachao",{
template:`
<div>
<h1>我是子组件</h1>
<slot>我是默认内容</slot>
</div>
`
})
var vm = new Vue({
el:"#app"
})
具名插槽
可以通过name属性为每个插槽起一个名字,通过名字来传递想要的内容。
<div id="app">
<chachao>
<p slot="data1">我是插槽1</p>
<p slot="data2">我是插槽2</p>
</chachao>
</div>
<script src="vue.js"></script>
<script>
Vue.component("chachao",{
template:`
<div>
<slot name="data1"></slot>
<slot name="data2"></slot>
</div>
`
})
var vm = new Vue({
el:"#app"
})
</script>
作用域插槽
父组件:
<div id="#app">
<子组件>
<template v-slot:名字>
slot 的传递内容
</template>
</子组件>
</div>
子组件:
<子组件>
<slot name="名字"><slot>
</子组件>
学习心得
最近讲的东西比较综合,理解是不行的,自己打算做个小项目。
近期评论