vue2 实现父子组件的双向绑定

父子组件数据的双向绑定

答：假设是子组件是type为text的input标签

1.父组件v-model传值，子组件props的value属性接收，v-bind绑定表单元素的value,然后v-on:input=‘$emit{(}^{\prime }inpu{t}^{\prime },$event.target.value)’

解释：为什么$emit传的是input,因为父组件v-model默认绑定的事件是Input

2.父组件使用v-bind时添加sync修饰符，子组件通过$emit(‘update:key名’,值)的形式通知父组件的修改

//父
<template>
  <div>
    <h1>测试页面</h1>
    <Input v-model="msg"></Input>
  </div>
</template>
<script>
import Input from "./components/Input.vue";
export default {
  data() {
    return {
      msg:0
    };
  },
  methods: {},
  components: {
    Input,
  },
};
</script>

//子
<template>
  <div>
    <input type="text" :value="value" @input="$emit('input',$event.target.value)"/>
  </div>
</template>

<script>
export default {
  props: ["value"],
};
</script>