VUE 插槽使用

插槽相当于占位,在组组件中的固定位置预定一个位置,当我们调用组件的时候好能够在那个位置插入我们想要补充的内容。

V-Input.vue

<div>
  <input v-model="inp"/>
  <slot name="btn" :data="inp"></slot>
</div>
export default{
  data:()=>{
    inp: ''
  }
}

​ name属性定义具名插槽,一般用于单组件具有多插槽。意思就是这里是某某地,不设置就是默认插槽。还可以通过v-bind绑定属性传递给父组件。

Father.vue

<div>
  <v-input>
    <template #btn="btnProps">
            <button @click="serch(btnProps.data)">
        serch
      </button>
    </template>
  </v-input>
</div>
export default{
  methods:{
    serch(payload){
      console.log(payload);
    }
  }
}

​ 父组件使用具名插槽v-slot:name表示我要到某某地方去。接收插槽参数是使用v-slot:name=props然后使用props.data,这里props是自己任意起名的,data也是任意起名,但是要和你在子组建中设置的一致。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。