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也是任意起名，但是要和你在子组建中设置的一致。