插槽 的 运用
插槽的使用其实是很简单
首先要明白插槽是使用在子组件中
代码实现:
<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>