一起学Vuejs（十五）----- 插槽

不积跬步，无以至千里；不积小流，无以成江海。

 

Vuejs语言基础

 

插槽：

插槽就是子组件中的提供给父组件使用的一个占位符，让父组件中的子组件模板数据正常显示。

 

无插槽：

<div id="app">
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
            <span>菜单</span>
        </child>
    </div>
</div>

<template id="child">
    <div class="child">
        <h3>这里是子组件</h3>
    </div>
</template>

<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        components: {
            child: {
                template: '#child'
            }
        }
    });
</script>
  

 注意结果，‘菜单’不显示：

这里是父组件
这里是子组件

 

插槽：

<div id="app">
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
            <span>菜单</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>

结果：

这里是父组件
这里是子组件
菜单

注意：如果有多个DOM元素，会一起插入到<slot></slot>这个标签内

 

具名插槽：

在父组件中添加一个 slot='自定义名字' 的属性，在子组件中的 <slot><slot> 里面添加 name='自定义名字'；
如果父组件中有一部分没有添加 slot 属性，则此处就是默认的插槽，在子组件中的 <slot></slot> 直接就是使用的父组件的默认插槽部分

<div class="father">
      <h3>这里是父组件</h3>
      <child>
          <span slot="demo1">菜单1</span>
          <span>菜单2</span>
          <span slot="demo3">菜单3</span>
      </child>
</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>

 结果：

这里是父组件
这里是子组件
菜单2菜单3

 

作用域插槽：

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译；
不过，可以在父组件中使用 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>

结果：

这里是父组件
这里是子组件
[''zhangsan'', ''lisi'', ''wanwu'', ''zhaoliu'', ''tianqi'', ''xiaoba'']

 

 

博客借鉴：https://www.jianshu.com/p/7024d34a144a