插槽 的 运用
插槽的使用其实是很简单
首先要明白插槽是使用在子组件中
代码实现：
<div id="app">
<div class="father">
<h3>这里是父组件</h3>
<child>
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
</child>
</div>
</div>
<template id="child">
<div class="child">
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {},
components: {
child: {
template: ‘#child‘
}
}
});
</script>
slot=‘自定义名字‘ 的属性，<slot><slot> 里面添加 name=‘自定义名字‘ 即可slot 属性，则此处就是默认的插槽，在子组件中的 <slot></slot> 直接就是使用的父组件的默认插槽部分<div id="app">
<div class="father">
<h3>这里是父组件</h3>
<child>
<span slot="demo1">菜单1</span>
<span>菜单2</span>
<span slot="demo3">菜单3</span>
</child>
</div>
</div>
<template id="child">
<div class="child">
<h3>这里是子组件</h3>
<slot></slot>
<slot name="demo3"><slot>
</div>
</template>
<script>
var vm = new Vue({
el: ‘#app‘,
data: {},
components: {
child: {
template: ‘#child‘
}
}
});
</script>
slot-scope 特性从子组件获取数据:data=data 先传递 data 的数据<div id="app">
<div class="father">
<h3>这里是父组件</h3>
<child>
<div slot-scope="user">
{{user.data}}
</div>
</child>
</div>
</div>
<script>
Vue.component(‘child‘, {
template:‘‘ +
‘<div class="child">\n‘ +
‘ <h3>这里是子组件</h3>\n‘ +
‘ <slot :data="data"></slot>\n‘ +
‘ </div>‘,
data: function () {
return {
data: [‘zhangsan‘, ‘lisi‘, ‘wanwu‘, ‘zhaoliu‘, ‘tianqi‘, ‘xiaoba‘]
}
}
});
var vm = new Vue({
el: ‘#app‘,
});
</script>
原文：https://www.cnblogs.com/oceanleader/p/12118683.html