vue实现父子组件通信

父组件向子组件传值（Props）

父组件通过 props 向子组件传递数据。在子组件中声明 props，父组件通过绑定属性传递值。

父组件代码示例：

<template>
  <ChildComponent :message="parentMessage" />
</template>

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

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

子组件代码示例：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
};
</script>

子组件向父组件传值（自定义事件）

子组件通过 $emit 触发自定义事件，父组件监听该事件并处理数据。

子组件代码示例：

<template>
  <button @click="notifyParent">Click me</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('child-event', 'Data from child');
    }
  }
};
</script>

父组件代码示例：

<template>
  <ChildComponent @child-event="handleChildEvent" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleChildEvent(data) {
      console.log(data); // 输出: "Data from child"
    }
  }
};
</script>

使用 v-model 实现双向绑定

v-model 是 props 和自定义事件的语法糖，适用于表单元素或自定义组件。

子组件代码示例：

<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  props: ['value']
};
</script>

父组件代码示例：

<template>
  <ChildComponent v-model="inputValue" />
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

使用 $refs 访问子组件

父组件通过 ref 属性直接访问子组件的属性和方法。

父组件代码示例：

<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
};
</script>

子组件代码示例：

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called');
    }
  }
};
</script>

使用 provide 和 inject 跨层级通信

祖先组件通过 provide 提供数据，后代组件通过 inject 注入数据。

祖先组件代码示例：

<script>
export default {
  provide() {
    return {
      sharedData: 'Shared data from ancestor'
    };
  }
};
</script>

后代组件代码示例：

<script>
export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData); // 输出: "Shared data from ancestor"
  }
};
</script>

使用事件总线（Event Bus）

创建一个全局事件总线，用于任意组件间的通信。

创建事件总线：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

发送事件组件：

<script>
import { EventBus } from './event-bus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Data from sender');
    }
  }
};
</script>

接收事件组件：

<script>
import { EventBus } from './event-bus.js';

export default {
  created() {
    EventBus.$on('message', data => {
      console.log(data); // 输出: "Data from sender"
    });
  }
};
</script>

使用 Vuex 状态管理

对于复杂应用，使用 Vuex 集中管理状态，实现组件间共享数据。

Store 定义示例：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

组件中使用：

<template>
  <div>{{ $store.state.count }}</div>
  <button @click="$store.commit('increment')">Increment</button>
</template>