插槽

自定义表单组件双向数据绑定

     <input v-model="message">
     message <-> value
      <input :value="message"  @input="(event)=>message = event.target.value">

     方法一
      CustomInput
      props:['modelValue']
      <template>
           <input :value="modelValue" @input="$emit('update:modelValue', event.target.value)">
      </template>

      <custom-input v-model="message"></custom-input>

     方法二
      CustomInput
      props:['modelValue']
      computed:{
            msgValue:{
                    get(){
                            return this.modelValue
                    }
                    set(value){
                            this.$emit('update:modelValue',value)
                    }
            }
      }
      <template>   
           <input class='c2 c1' v-model="msgValue">
      </template>

      <custom-input v-model="message"></custom-input>

透传attribute

<custom-input class='c1'></custom-input>

插槽（slot）

一、 插槽是什么及基础使用 插槽使用条件:

1. 父子组件之间
2. 子组件定义插槽 <slot></slot>
3. 父组件定义插槽内容
   <template v-slot="default"> 内容 </templae>

二、具名插槽

1. 插槽设定名称
2. 父组件根据名称放内

三、作用域插槽

插槽传参

1. 子组件中slot插槽标签绑定属性
2. 父组件使用插槽处接收属性

四、v-slot指令简写 #

     使用: 子组件中定义数据     商品列表数据
           在父组件中定义界面   界面效果

1. 父子组件之间使用

2. 子组件定义插槽

      <slot name="tree"></slot>
      父组件定义插槽内容
       <cusom-input >
           <template #tree="slotTree">
                    {{slotTree.list}}
           </templage>
       </custom-input>
   

3. 作用域插槽

动态组件

通过点击事件确定组件

<component :is=""></component>

4.input双向数据绑定