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>