vue父子組件的的通信問題總結

寫了一段時間的vue發現其最大的好處就是覺得一起

1.父組件傳遞數據給子組件（數據綁定）

• 父組件向子組件屬性注入數據

<template>
//使用子組件,綁定子組件的屬性爲message（子組件將通過獲取屬性數據獲取父組件傳輸的值）
  <edit :editMessage="message"><edit>
</template>
<script>
//引入組件
import Edit from "./edit";
export default {
  name: "userSetting",
  //聲明組件
  components: { Edit },
  data() {
    return {
      message:{
              name :'pam',
              age :22
          }
    };
  },
  methods: {}
};

• 子組件展示數據

<template>
  <div>
  <title>名字：{{editMessage.name}}</title>
  <p>年齡{{editMessage.age}}</p>
  </div>
</template>
<script>
export default {
//獲取屬性數據(改屬性可以可以直接通過 this.editMessage獲取數據)
  props: ["editMessage"],
  data() {
    return {};
  },
 
};
</script>

2、子組件向父組件傳遞數據，觸發父組件事件

• 子組件發射事件響應,回調數據

<template>
  <div>
  <title>名字：{{editMessage.name}}</title>
  <p>年齡{{editMessage.age}}</p>
  <a-input v-model="sex"></a-input>
  <a-button @click="subSex"></a-button>
  </div>
</template>
<script>
export default {
//獲取屬性數據(改屬性可以可以直接通過 this.editMessage獲取數據)
  props: ["editMessage"],
  data() {
    return {
        Sex:'男'
    };
  },
  methods: {
      subSex(){
          //回調在父組件裏面子組件 @setSex綁定的父組件的函數，this.Sex爲父組件被調用函數的參數
          this.$emit('setSex',this.Sex);
      }
  }
 
};
</script>

• 觸發父組件綁定數據：

<template>
  <edit :editMessage="message" @setSex = "getSex"><edit>
    <p>{{message.sex}}</p>
</template>
<script>
import Edit from "./edit";
export default {
  name: "userSetting",
  components: { Edit },
  data() {
    return {
      message:{
              name :'pam',
              age :22,
              sex:
          }
    };
  },
  methods: {
  //被子組件觸發的函數
    getSex(event){
        this.sex = event;
    }
  }
};

3、父組件觸發子組件事件（傳輸數據並觸發子組件函數）

• 父組件執行子組件方法

<template>
//綁定edit組件的ref對應change,在函數中執行$refs.change即可以執行子組件的所有方法
  <edit :editMessage="message" @setSex = "getSex" ref="change"><edit>
    <input v-model="message.sex"></input>
    <button @click="changeSex(this.message.sex)"></button>
</template>
<script>
import Edit from "./edit";
export default {
  name: "userSetting",
  components: { Edit },
  data() {
    return {
      message:{
              name :'pam',
              age :22,
              sex:
          }
    };
  },
  methods: {
    changeSex(event) {
        //將數據event以函數參數傳入
      this.$refs.change.showModal(event);
    },
  }
};

• 子組件對應的方法被調用

<template>
  <edit :editMessage="message" @setSex = "getSex"><edit>
    <p >{{message.sex}}</p>
</template>
<script>
import Edit from "./edit";
export default {
  name: "userSetting",
  components: { Edit },
  data() {
    return {
      message:{
              name :'pam',
              age :22,
              sex:
          }
    };
  },
  methods: {
  //被子組件觸發的函數
    getSex(event){
        this.sex = event;
    },
    showModal(event){
        this.message.sex = event;
        //todu可以做其他操作
    }
  }
};