vue2 父子组件双向数据绑定

前言

遇到问题

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "inputData"

vue2本身没有双向数据绑定，父子组件交互通过单向数据实现交互，因此需要变通

思路

1、从父组件接收的inputData数据，直接赋用备用finputData，父组件传的值只做单向传值。
2、监听子组件备用值finputData变化，通过$emit告诉父组件。
3、父组件触发接收事件，改变传入的name。

父组件

//html部分
<VInput
  :input-data="name"
  @data="dataChange"
></VInput>
//js部分
  data() {
    return {
       name: "111",
    };
  },
  methods: {
    dataChange(op) {
      this.name = op;
    },
  },

子组件

//html部分
<el-input
   v-model="finputData"
 ></el-input>
//js部分
  props: {
    inputData: String, //输入值
  },
  data() {
    return {
      finputData: "",
    };
  },
  watch: {
    finputData(val) {
      this.$emit("data", val);
    },
  },
  created() {
    this.finputData = this.inputData;
  },

computed的set/get方法效率更高，请参考这里.
本文如果能给您提供帮助，请留下一个小小的赞