vue.js之slot

来源：互联网发布：c语言写个三角形编辑：程序博客网时间：2024/05/21 09:13

没有slot的情况

<div id="app">    <child>        <span>1111</span>        </child></div><script>    // 注册子组件    Vue.component("child", {        template: "<div>这是一个div标签</div>"    });    // 初始化父组件    new Vue({        el: "#app"    });</script>

模版里的span标签会被替代成 “<div>这是一个div标签</div>” 如下图：

这里写图片描述

有slot的情况

slot的意思是插槽，想想你的电脑主板上的各种插槽，有插CPU的，有插显卡的，有插内存的，有插硬盘的，所以假设有个组件是computer，其模板是template ，如下：

<body>    <div id="app">        <computer>            <div slot="CPU">Intel Core i7</div>            <div slot="GPU">GTX980Ti</div>            <div slot="Memory">Kingston 32G</div>            <div slot="Hard-drive">Samsung SSD 1T</div>        </computer>    </div>    <script>        // 注册子组件        Vue.component("computer", {            template:   `<div>                            <slot name="CPU">这儿插你的CPU</slot>                            <slot name="GPU">这儿插你的显卡</slot>                            <slot name="Memory">这儿插你的内存</slot>                            <slot name="Hard-drive">这儿插你的硬盘</slot>                        </div>`        });        // 初始化父组件        new Vue({            el: "#app"        });    </script></body>

这里写图片描述

单个slot

简单来说，使用slot标签，可以将<span>1111</span>，放到子组件中想让他显示的地方。如下图：

<div id="app">    <child>        <span>1111</span>        </child></div><script>    // 注册子组件    Vue.component("child", {        template: "<div>这是<slot></slot>一个div标签</div>"    });    // 初始化父组件    new Vue({        el: "#app"    });</script>

这里写图片描述

即使有多个标签，会一起被插入，相当于用父组件放在子组件里的标签，替换了<slot></slot>这个标签。如下图：

<div id="app">    <child>        <span>1111</span>           <i>2222</i>        <b>3333</b>    </child></div><script>    // 注册子组件    Vue.component("child", {        template: "<div>这是<slot></slot>一个div标签</div>"    });    // 初始化父组件    new Vue({        el: "#app"    });</script>

这里写图片描述

具名Slot(有名称的slot)

将放在子组件里的不同html标签放在不同的位置
父组件在要分发的标签里添加 slot=”name名” 属性
子组件在对应分发的位置的slot标签里，添加name=”name名” 属性，
然后就会将对应的标签放在对应的位置了。如下图：

<div id="app">    <child>        <span slot="one">1111</span>        <i slot="two">2222</i>        <b slot="three">3333</b>    </child></div><script>    // 注册子组件    Vue.component("child", {        template:   `<div>                        这是                        <slot name='one'></slot>                        一个                        <slot name='two'></slot>                        div                        <slot name='three'></slot>                        标签                    </div>`    });    // 初始化父组件    new Vue({        el: "#app"    });</script>

这里写图片描述

没有slot属性

如果子组件标签中没有slot属性，将会显示默认的值

    <div id="app">        <child>            <!-- <span slot="one">1111</span> -->            <i slot="two">2222</i>            <!-- <b slot="three">3333</b> -->        </child>    </div>    <script>        // 注册子组件        Vue.component("child", {            template:   `<div>                            <slot name='one'>no one</slot>                            <slot name='two'>no two</slot>                            <slot name='three'>no three</slot>                        </div>`        });        // 初始化父组件        new Vue({            el: "#app"        });    </script>

slot=”two” 就被插到固定的位置上，如下图：

这里写图片描述

作用域插槽 ( 2.1.0 新增 )

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样

在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。

slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象：

<div id="app">    <child>        <template slot-scope="props">            <p>hello from parent</p>            <p>{{ props.tt }}</p>        </template>    </child></div><script>    Vue.component('child', {        template:   `<div class="child">                        <slot tt="hello from child"></slot>                    </div>`    })    new Vue({        el: "#app"    });</script>

这里写图片描述

阅读全文

0 0