插槽
插槽我对他的理解就是父组件的东西插到子组件的<slot></slot>里面,也不知道这样理解对不对,方便自己记忆
普通插槽
父组件如下:
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div>
<span>这是父组件插到子组件的slot标签</span>
<span>这是父组件插到子组件的slot标签</span>
<span>这是父组件插到子组件的slot标签</span>
</div>
</child>
</div>
</template>
<script>
import child from './children'
export default {
components: {
child
}
}
</script>
子组件如下:
<template>
<div>
<h3>这里是子组件,父组件的child将会插到slot标签里面</h3>
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
显示效果如下:
具名插槽
父组件
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div>
<p>这不是具名插槽</p>
<p>这不是具名插槽</p>
<p>这不是具名插槽</p>
</div>
<div slot="havename">
<p>这是具名插槽</p>
<p>这是具名插槽</p>
<p>这是具名插槽</p>
</div>
</child>
</div>
</template>
<script>
import child from './children'
export default {
components: {
child
}
}
</script>
子组件
<template>
<div>
<h3>这里是子组件,父组件的child将会查到下面</h3>
<slot name="havename"></slot>
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
效果如下:
作用域插槽
我对他的理解就是数据在子组件里面,父组件可以用
父组件
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div>
<p>这不是具名插槽</p>
<p>这不是具名插槽</p>
<p>这不是具名插槽</p>
</div>
<div slot="havename">
<p>这是具名插槽</p>
<p>这是具名插槽</p>
<p>这是具名插槽</p>
</div>
<template slot-scope="fromchildData">
<p v-for="(item,index) of fromchildData.data" :key="index">{{item}}</p>
</template>
</child>
</div>
</template>
<script>
import child from './children'
export default {
components: {
child
}
}
</script>
子组件
<template>
<div>
<h3>这里是子组件,父组件的child将会查到下面</h3>
<slot name="havename"></slot>
<slot></slot>
<slot :data="childData"></slot>
</div>
</template>
<script>
export default {
data() {
return {
childData:[1,2,3,4,5]
}
},
}
</script>
效果如下:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。