// 父組件
<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent component!'
    };
  }
};
</script>

// 子組件（ChildComponent.vue）
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>`
//在上述示例中，父組件通過(guò)props屬性將`parentMessage`數(shù)據(jù)傳遞給了子組件，子組件接收該數(shù)據(jù)并在模板中顯示。

// 子組件（ChildComponent.vue）
<template>
  <div>
    <button @click="notifyParent">Notify Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      const childData = 'Hello from child component!';
      this.$emit('child-event', childData);
    }
  }
};
</script>

// 父組件
<template>
  <div>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      console.log(data); // 打印 "Hello from child component!"
    }
  }
};
</script>
//在上述示例中，子組件定義了一個(gè)名為`notifyParent`的方法，該方法通過(guò)`$emit`觸發(fā)了名為`child-event`的事件并將數(shù)據(jù)傳遞給了父組件。父組件監(jiān)聽(tīng)該事件并接收了子組件傳遞的數(shù)據(jù)。

// Vuex Store
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    parentData: 'Hello from parent component!'
  },
  mutations: {
    updateParentData(state, data) {
      state.parentData = data;
    }
  }
});

// 父組件
<template>
  <div>
    <ChildComponent :parentData="parentData" @update-data="updateData" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
import store from './store'; // 引入Vuex Store

export default {
  components: {
    ChildComponent
  },
  computed: {
    parentData() {
      return store.state.parentData;
    }
  },
  methods: {
    updateData(data) {
      store.commit('updateParentData', data); // 提交mutation更新?tīng)顟B(tài)
    }
  }
};
</script>

// 子組件（ChildComponent.vue）
<template>
  <div>
    <button @click="notifyParent">Notify Parent</button>
  </div>
</template>

<script>
export default {
  computed: {
    parentData() {
      return this.$store.state.parentData; // 獲取父組件傳遞的狀態(tài)數(shù)據(jù)
    }
  },
  methods: {
    notifyParent() {
      const childData = 'Hello from child component!'; // 子組件數(shù)據(jù)，通過(guò)事件傳遞給父組件更新?tīng)顟B(tài)數(shù)據(jù)實(shí)現(xiàn)共享。
      this.$emit('update-data', childData); // 觸發(fā)自定義事件將數(shù)據(jù)傳遞給父組件更新?tīng)顟B(tài)數(shù)據(jù)。需要在父組件中監(jiān)聽(tīng)該事件并調(diào)用相應(yīng)的方法。
      //如：this.$emit('update-data', childData); this.$emit('update-data', childData);