文章目录[隐藏]
目录
在Vue中使用插槽:slot
1、在子组件的template里可以直接使用slot标签<slot></slot>,它可以显示父组件向子组件插入的内容。
2、slot标签里面可以写一些默认值,当父组件没有插入内容的时候它就会显示默认值,插入内容时就只显示插入的内容。
3、当使用多个slot标签时,直接插入多个内容时,每个slot标签内都会包括所有插入的内容。
可以通过slot属性给插入的不同内容设置指定的名字,然后给相应的slot标签设置相应的name属性值,就可以让该slot标签显示指定的插入内容。
1、插槽是统称,模板中的三个slot标签都是插槽。
2、但是多个插槽需要区分,会分别设置一个name属性。这个就叫做“具名插槽”,需要使用name属性命名。
3、上面的是插入插槽的内容,将某个名字的内容插到子组件对应名字里面去。这里就是插入到name="footer"这个插槽中。
4、一般只有一个插槽的时候,不需要具名哦,多个才需要name来区分。
<div id="app"> <child> <!-- <div slot="header">header</div> --> <div slot="footer">footer</div> </child> </div> <script> Vue.component('child',{ //通过插槽slot可以更方便地向子组件传递元素,同时子组件使用插槽的内容也非常简单 template:`<div> <slot name='header'> <h6>header插槽内容为空的默认值</h6> </slot> <div class="content">body</div> <slot name='footer'></slot> </div>` }) var vm = new Vue({ el: "#app", }) </script>
作用域插槽:使用template标签包裹
1、<slot v-for='item of list' :item=item></slot>,只确定要对列表做一个循环,但是列表的每一项怎么显示由外部决定。
2、所以需要给子组件传递一个slot,首先一定要在最外层套一个template【固定写法】(这就是作用域插槽),同时要写一个slot-scope属性(属性值是自定义的)。(如:<template slot-scope='props'></template>,含义为子组件在使用slot的时候,会往slot里面传递一个item数据,在上面使用子组件的时候就可以用这个数据,这个数据就放在slot-scope属性值中)
3、应该使用作用域插槽的情况:当子组件要做循环或者它的某一部分应该由外部传递进来的时候。
使用作用域插槽时,子组件可以向父组件的插槽里面传数据,父组件传递过来的插槽如果想接收这个数据,必须在外层使用一个template,同时通过slot-scope对应的属性名来接收传递过来的数据。
<div id="app"> <child> <!-- 父组件调用子组件时,给子组件插入一个作用域插槽template, 插槽里声明一个从子组件接收的数据item放在slot-scope的属性(props)里,然后通过H1模版方式展现 --> <template slot-scope="props"> <li>{{props.item}} -hello</li> </template> </child> </div> <script> Vue.component('child', { data:function(){ return{ list:[1,2,3,4] } }, //当子组件用slot时,往slot里传递一个item的数据,在父组件时就能用这个数据 template:`<div> <ul> <slot v-for="item of list" :item=item> </slot> </ul> </div>` }) var vm = new Vue({ el: "#app" }) </script>
总结
本篇文章就到这里了,希望能给你带来帮助,也希望您能够多多关注华域联盟的更多内容!
您可能感兴趣的文章:
- 详解Vue slot插槽
- Vue slot插槽的使用详情
- Vue.js slot插槽的作用域插槽用法详解
- 关于VUE的编译作用域及slot作用域插槽问题
- Vue中插槽slot的使用方法与应用场景详析
- Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
- vue插槽slot的简单理解与用法实例分析
- 浅谈Vue中插槽slot的使用方法
本文由 华域联盟 原创撰写:华域联盟 » JavaScript--在Vue中使用插槽:slot
转载请保留出处和原文链接:https://www.cnhackhy.com/80499.htm