前言

这一期比较简单，就是双向绑定，为学习过程中的笔记，虽然简单，但是如果有错误或者更好的方法，希望大佬指出

v-model没啥好说的，就是一个语法糖

• input和textarea 使用value作为props，通过Input监听事前从子传到父,如果想监听change事件，可以使用lazy修饰符 <input type="text" :value="text" @input="text = $event.target.value" />
• select 则是 value 和change
• checkbox和radio使用checked和change 但是v-model也是可以用在自定义组件上的

自定义组件的双向绑定

不使用v-model

父组件

 <Lmodel
      :selected="selected"
      :list="list"
      @change="(data) => (this.selected = data)"
  ></Lmodel>
 你选择了{{ selected.name }}

子组件

    <div @click="showBottom = !showBottom">{{ selected.name }}</div>
    <div v-if="showBottom">
      <div v-for="(item, i) in list" :key="i" @click="changeSelect(i)">
        {{ item.name }}
      </div>
    </div>
    //........
   data() {
    return {
      text: "",
      showBottom: false,
    };
  },
  methods: {
    changeSelect(i) {
      this.$emit("change", this.list[i]);
      this.showBottom = false;
    },
  },

效果如下

使用v-model

父组件

 <Lmodel v-model="selected" :list="list"></Lmodel>

子组件

子组件中最重要的是这一段，其他与之前的代码保持一致model中的两个属性：prop和event标记了从父到子，从子到父的通道，此时$emit中触发的事件一定要是change

  model: {
    prop: "selected",
    event: "change",
  },

效果与之前一致，就不贴图了。