vue插槽slot使用

x33g5p2x  于11个月前 转载在 Vue.js  
字(3.0k)|赞(0)|评价(0)|浏览(153)

八 Slot

组件的作用域:父组件的内容在父组件编译,子组件的内容在子组件编译;

8.1 单个插槽

  1. 在子组件中定义插槽<slot>, 插槽里面写入<p> 标签;
  2. 插入组件内的内容将会代替插槽里面的内容,否则显示插槽里面的内容;

如下代码中注释掉 <span> 就会显示插槽里面内容,否则显示 <span> 标签内容;

 <div id="app">
        <zszxz-component>
            <!-- <span>vue2.x</span> -->
        </zszxz-component>
    </div>
    <script type="text/javascript">
        Vue.component('zszxz-component',{
            template: '<div> \
                <slot> \
                    <p> 默认显示:知识追寻者<p/> \
                </slot> \
            </div>',
        });
        var app = new Vue({
            el: '#app',
        })
    </script>

8.2 具名插槽

具名插槽就是带有名称的插槽,其能与单个插槽共存;

  1. <span>标签内容替换默认插槽(main);
  2. 具名插槽代替指定名称的插槽内容;header对应header; footer 对应 footer;
   <div id="app">
        <zszxz-component>
            <span>vue2.x</span>
            <div slot="header">菜单栏头部</div>
            <div slot="footer">菜单栏底部</div>
        </zszxz-component>
    </div>
    <script type="text/javascript">
        Vue.component('zszxz-component',{
            template: '<div class="container"> \
                <div class="header"> \
                    <slot name="header"> </slot> \
                </div> \
                <div class="main"> \
                    <slot> </slot> \
                </div> \
                <div class="footer"> \
                    <slot name="footer"> </slot> \
                </div> \
            </div>',
        });
        var app = new Vue({
            el: '#app',
        })
    </script>

渲染结果

<div id="app">
    <div class="container">
        <div class="header">
        	<div>菜单栏头部</div>
        </div>
        <div class="main">
        	<span>vue2.x</span>
        </div>
        <div class="footer">
        	<div>菜单栏底部</div>
        </div>
    </div>
</div>

8.3 作用域插槽

作用域插槽可以理解为通过子组件向父组件传递内容;

  1. <template> 标签中的scope属性中定义任意变量 props;
  2. 通过变量props读取子组件插槽内容;
  <div id="app">
        <zszxz-component>
            <template scope="props">
                    <span>vue2.x</span>
                    <p>{{props.msg}}</p>
            </template>
        </zszxz-component>
    </div>
    <script type="text/javascript">
        Vue.component('zszxz-component',{
            template: '<div class="container"> \
                <div class="main"> \
                    <slot msg="知识追寻者"> </slot> \
                </div> \
            </div>',
        });
        var app = new Vue({
            el: '#app',
        })
    </script>

渲染结果

vue2.x
知识追寻者

8.4 访问插槽

通过$slots访问插槽,其返回是一个数组;

   <div id="app">
        <zszxz-component>
            <span>vue2.x</span>
            <div slot="header">菜单栏头部</div>
            <div slot="footer">菜单栏底部</div>
        </zszxz-component>
    </div>
    <script type="text/javascript">
        Vue.component('zszxz-component',{
            template: '<div class="container"> \
                <div class="header"> \
                    <slot name="header"> </slot> \
                </div> \
                <div class="main"> \
                    <slot> </slot> \
                </div> \
                <div class="footer"> \
                    <slot name="footer"> </slot> \
                </div> \
            </div>',
            mounted: function(){
                var header = this.$slots.header;
                var main = this.$slots.default;
                console.log(header);
                console.log(main);
            }
        });
        var app = new Vue({
            el: '#app',
        })
    </script>

相关文章