本文主要是介绍vue slot 仔细研究一下，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
核心内容：
v-solt , v-bind , $slots , $scopedSlots , $attrs , $listeners一，基础用法。
//子组件
<div><slot></slot>
</div>
......
//父组件
<div><children><h1>hello wolrld</h1></children>
</div>
//hello world 将会放到子组件中进行渲染二，名命插槽+传值
//子组件
<div><slot name="one" :random='slotParam'></slot><slot name="two" v-bind='slotParam'></slot><slot v-bind='slotParam'></slot>
</div>
<script>
export default {data() {return {slotParam:{name:'米老鼠'}};},
};
</script>
//slot 不写name默认name='default'
......
//父组件
// "#" 是v-slot:的语法糖
<div><children><template #one={random:{name}}> ---{{name}}---</template><template #two={name}> ---{{name}}---</template><div #default={name}>{{name}}</div>//default也可以这样写<div v-slot={name}>{{name}}</div></children>
</div>
//name都将渲染为‘米老鼠’三，扩展
1,$slot,$scopedSlots.
//$slot ：非作用域插槽集合。
//$scopedSlots：作用域插槽集合。
//子组件<div><p v-for='(item,index) in Object.keys($scopedSlots)'><slot :name="key" v-bind="scope"></slot></p></div>
<script>
export default {data() {return {slotParam:{name:'米老鼠'}}},
mounted(){ console.log(this.$slot,this.$scopedSlot)}
//$slot:下例调用使用了#one，#default，打印如下。
//{two:obj}//$scopedSlot !!!(scopedSlot的信息===父组件的使用数量)
//{one:fun,two:fun,default:fun}
};
</script>
//父组件 -------------------------------------------------<div><finner><template #one="{ name}"> {{ one }} </template><template #two> two </template><template #three="{ name}">{{ name }} </template></finner></div>2,$attrs,$listeners.
//$attrs:包含了父作用域中, attribute 绑定 (class 和 style 除外)的值，
//且props接收中的值，也不包含其中。（通过 v-bind="$attrs" 传入内部组件）。
//$listeners：父作用域中的事件监听器，通过 v-on="$listeners" 传入内部组件。
//父组件
<div><Componenst :aaa="aaa" :bbb="bbb" @handOne="handOne" @handTwo="handTwo" />
</div>
...
data(){return {aaa:111,bbb:222}
},
method:{handOne(){},handTwo(){console.log('触发了')}
}
...
//子组件
<div><componenst-child v-bind="$attrs" v-on="$listeners"/>
</div>
...
props{aaa:'这里props接收了'
},
...
//子组件
<div><componenst-sun @click='$listeners.handOne'/>
</div>
...
mounted(){console.log(this.$attrs,this.$listeners)//{bbb:222} (因子组件props内有aaa，所以aaa被$attrs剔除)//{handOne(){},handTwo(){}}
},
...以上内容仔细研究一下，slot插槽是非常重要的核心内容，多用多练即可。
这篇关于vue slot 仔细研究一下的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
