vue中父子组件相互传值的实现方法详解

// 父组件
<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>`
//在上述示例中，父组件通过props属性将`parentMessage`数据传递给了子组件，子组件接收该数据并在模板中显示。

// 子组件（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>
//在上述示例中，子组件定义了一个名为`notifyParent`的方法，该方法通过`$emit`触发了名为`child-event`的事件并将数据传递给了父组件。父组件监听该事件并接收了子组件传递的数据。

// 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更新状态
    }
  }
};
</script>

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

<script>
export default {
  computed: {
    parentData() {
      return this.$store.state.parentData; // 获取父组件传递的状态数据
    }
  },
  methods: {
    notifyParent() {
      const childData = 'Hello from child component!'; // 子组件数据，通过事件传递给父组件更新状态数据实现共享。
      this.$emit('update-data', childData); // 触发自定义事件将数据传递给父组件更新状态数据。需要在父组件中监听该事件并调用相应的方法。
      //如：this.$emit('update-data', childData); this.$emit('update-data', childData);