vue组件通信之sync学习

sync其实是一种语法糖，可以很简单的使用子组件与父组件的通行

简写点：
当子组件想要修改父组件数据时，只用使用this.$emit('update:dataName', dataValue) 这种方式去通知父组件，
父组件上不需要做任何操作。

下面上代码

父组件

<template>
  <div>
    <div>父组件中 {{ name }}</div>
    <hr>
    <!-- 如果不加sync，当子组件要修改父组件时，这里还需要接收一下子组件的方法 -->
    <child :name.sync="name"></child>
    <hr>
    <button @click="change">在父组件中修改</button>
  </div>
</template>
 
<script>
import child from '@/components/SyncChild'
export default {
  name: 'list',
  components: {
    child
  },
  data () {
    return {
      name: 'xiaoming'
    }
  },
  methods: {
    change() {
      this.name = '123';
    }
  }
}
</script>

子组件

<template>
  <div>
    <div>子组件中 {{ name }}</div>
    <hr />
    <!-- @input用来监听input输入 -->
    <input :value="name" @input="writeData" type="text" />
    <br />
    <button @click="childUpdate">在子组件修改</button>
  </div>
</template>
<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    }
  },
  methods: {
    writeData(e) {
      // e.target.value可以获取到input框中当前的数据
      console.log(e);
      console.log(e.target.value);
      // 使用this.$emit("update:dataName", dataValue)  向父组件通信
      this.$emit("update:name", e.target.value);
    },
    childUpdate() {
      this.$emit("update:name", "child");
    }
  }
};
</script>