vue父子实现

Vue 父子组件通信实现方法

Vue 中父子组件通信可以通过多种方式实现，主要包括 props、自定义事件、ref 和 provide/inject 等。以下是几种常见的实现方式：

父组件向子组件传递数据（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 触发自定义事件，父组件通过 v-on 监听事件并接收数据。

子组件代码：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-from-child', 'Hello from child');
    }
  }
};
</script>

父组件代码：

<template>
  <ChildComponent @message-from-child="handleChildMessage" />
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleChildMessage(message) {
      console.log(message); // 'Hello from child'
    }
  }
};
</script>

使用 ref 直接访问子组件

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

父组件代码：

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

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

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

子组件代码：

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

使用 provide/inject 跨层级传递数据

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

祖先组件代码：

<script>
export default {
  provide() {
    return {
      providedData: 'Data from ancestor'
    };
  }
};
</script>

后代组件代码：

<script>
export default {
  inject: ['providedData'],
  mounted() {
    console.log(this.providedData); // 'Data from ancestor'
  }
};
</script>

使用事件总线（Event Bus）

对于非父子组件通信，可以创建一个 Vue 实例作为事件总线。

事件总线代码：

// 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-event', 'Hello from sender');
    }
  }
};
</script>

接收组件代码：

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

export default {
  created() {
    EventBus.$on('message-event', message => {
      console.log(message); // 'Hello from sender'
    });
  }
};
</script>

以上方法可以根据具体场景选择使用，props 和自定义事件适用于直接的父子组件通信，provide/inject 适用于跨层级通信，事件总线适用于任意组件间通信。