插槽的使用其实是很简单
首先要明白插槽是使用在子组件中的，
2、插槽是为了将父组件中的子组件模板数据正常显示
- demo1
<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>
demo1 结果
- demo2
<div id="app">
<div class="father">
<h3>这里是父组件</h3>
<child>
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
</child>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
components: {
child: {
template: '<h1>demo2</h1>'
}
}
});
</script>
demo2 结果
具名插槽
- demo3
<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='自定义名字'的属性，
然后在子组件中的<slot><slot>里面添加name='自定义名字'即可
如果父组件中有一部分没有添加slot属性，则此处就是默认的插槽，在子组件中的<slot></slot>直接就是使用的父组件的默认插槽部分
demo3
作用域插槽
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
不过，我们可以在父组件中使用slot-scope特性从子组件获取数据
前提是需要在子组件中使用:data=data先传递data的数据
- demo4
<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>
demo4
