v-model实现父子组件双向绑定

官网地址：https://cn.vuejs.org/v2/api/#model

一、API

　　model: { prop?: string, event?: string }

二、实现

// 父组件
<template>
  <div id="app">
　　 // 使用 input 组件,使用 v-model
    <sp-input v-model="value"></sp-input>
    <button @click="Console">显示value</button>
  </div>
</template>

<script>
import input from "../src/components/input";
export default {
  name: "App",
  data() {
    return {
      // 定义 input 需要的 value属性
      value: ''
    };
  },
  components: {
    "sp-input": input
  },
  methods: {
    Console() {
      console.log(this.value)
      alert(this.value);
    }
  }
};
</script>

//子组件
<template>
  <div>
    // 封装 input 标签,v-model绑定computed属性
    <input type="text" v-model="InputValue" /
  </div>
</template>

<script>
export default {
  name: "sp-input",
  // 定义model属性
  model: {
　　 // prop即 父组件使用 v-model 绑定的属性,这个名称是自定义的
    prop: "value",
    // event即 子组件会向父组件触发的事件,父组件的 v-model可以监听到这个事件,并将vlaue赋值给v-model绑定的属性
    event: "input"
  },
  props: {
    // 这里的 prop 定义必须与 model中定义的 prop 同名
    value: String
  },
  computed: {
    // 定义一个计算属性,给子组件的 v-model使用
    InputValue: {
      // 计算属性的 get 返回父组件传入的 value,即model,props中定义的 prop
      get() {
        return this.value;
      },
      set(value) {
        //向父组件触发事件,此事件为model中定义的event,子组件v-model绑定了该计算属性,输入时会触发计算属性的set方法,即向父组件触发该事件
        this.$emit("input", value);
      }
    }
  }
};
</script>

三、注意事项

• 除了使用computed属性之外，还可以使用 @input 去触发事件。
• 重点为组件的 model属性

 

谦良恭卑，信诚实至；生活不易，共勉同求。