博客

首先要明白的是 v-model在input 、checked 、 radio 、select等标签上表示的意思

v-model 在input中表示 value 和input事件 ，如果我们把他么拆分开 ，那么就能实现组件的v-model

很简单 ，总共算分为三步吧

第一步，在组件内部的input的标签上 使用：value绑定props中的值，这一点要明白 绑定的是父组件传过来的值

HTML

<input type="text" :value="toValue" @input="inputHandler" />
  <select :value="selectValue" @change="selectChange">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
JS
    props: ["name", "toValue",'selectValue'],

第二步 @input事件自定义，往外暴露一个事件 ，这个事件名是有说法的，规定必须是 update：value绑定的变量名，必须为这种格式，使用e.target.value往外传输当前input框上的值

const inputHandler=(e)=>{
      console.log(e.target.value)
      context.emit('update:toValue',e.target.value)
    }
    const selectChange=(e)=>{
      context.emit('update:selectValue',e.target.value)
    }

第三步 父组件调用组件，在组件上使用v-model:子组件value绑定的变量名=“父组件内部的变量”

<Child
    :name="myObj"
    @toPatent="toPatent"
    v-model:toValue="toValue1"
    v-model:selectValue="toValue1"
  ></Child>

总结：

子组件必须接受父组件传过来的值

子组件必须使用update:变量名 往外暴露一个事件

父组件中调用必须为v-model：名字来调用

仅记录平常学习