vue 父子组件双向绑定

1、。父组件

<template>
  <div class="parent">
    <p>父组件传入子组件的值：{{ name }}</p>
    <legend>子组件</legend>
    <child :val="name" @update="modify"> </child>
  </div>
</template>

<script>
import Child from "../components/HelloWorld";
export default {
  components: { Child },
  data() {
    return {
      name: "父组件值"
    };
  },
  methods: {
    modify(newVal) {
      this.name = newVal;
    }
  }
};
</script>

2.子组件

<template>
  <label class="child">
    输入框：<input :value="val" @input="$emit('update', $event.target.value)" />
  </label>
</template>
<script>
export default {
  props: ["val"]
};
</script>

二。
父组件

<template>
  <div class="parent">
    <p>父组件传入子组件的值：{{ name }}</p>
    <legend>子组件</legend>
    <child :val.sync="name"> </child>
  </div>
</template>

<script>
import Child from "../components/HelloWorld";
export default {
  components: { Child },
  data() {
    return {
      name: "父组件值"
    };
  }
};
</script>

子组件

<template>
  <label class="child">
    输入框：<input
      :value="val"
      @input="$emit('update:val', $event.target.value)"
    />
  </label>
</template>
<script>
export default {
  props: ["val"]
};
</script>