Vue插槽

Posted 2021-02-16 yubaibai

作用：当子组件需要展示更具父组件的dom传来的值，可以用插槽 ，

父组件优雅的向子组件传递dom

 

 

具名插槽

父组件：slot="xxx"是    

子组件： <slot name="xxx"></slot>

<child>
				
				<p slot="name">dell</p>
				<p slot="hi">good night</p>
</child>




Vue.component(‘child‘,{
				props:[‘content‘],
				
				template:`<div>
				          <p>hello</p>
				          <slot name="name"></slot>
				          <div>---------------</div>
				          <slot name="hi"></slot>
				         </div>`,
			})
			

　　

 

作用域插槽

父组件在调用子组件的时候给子组件传了一个插槽，这个插槽为作用域插槽，该插槽必须放在template标签里面，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式

slot-scope="props"

<hello >
                <template slot-scope="props">
                    <li>{{props.item}}</li><--!定义使用渲染方式-->
                </template>
                
</hello>

<hello >
                <template slot-scope="props">
                    <li>{{props.item}}</li><--!定义使用另一种渲染方式-->
                </template>
                
</hello>

Vue.component(‘hello‘,{
                data:function(){
                    return {
                        list:[1,2,3,4],
                    }
                },
                template:`<div><ul><slot v-for="item in list" :item=item></slot></ul></div>`
            })