vue slot 仔细研究一下

最新推荐文章于 2024-07-18 17:00:19 发布

超级罗伯特

最新推荐文章于 2024-07-18 17:00:19 发布

阅读量538

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_68633804/article/details/136526544

版权

本文详细介绍了Vue.js中的slot插槽及其高级用法，包括基础插槽、命名插槽传值、$slot和$scopedSlots的区别，以及如何处理$attrs和$listeners。强调了在父子组件间传递数据和事件处理的重要性。

摘要由CSDN通过智能技术生成

核心内容：

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插槽是非常重要的核心内容，多用多练即可。