在vue中非父子组件通讯如何实现

在Vue中，非父子组件之间的通信可以通过以下几种方式实现：

1. 事件总线（Event Bus）：创建一个新的Vue实例作为事件中心，其他组件通过$emit触发事件，再通过$on监听事件来进行通信。

2. Vuex：Vuex是Vue的官方状态管理库，用于在多个组件之间共享状态。通过在Vuex中定义状态和对应的mutations来实现非父子组件之间的通信。

3. props和$emit：可以通过props属性将数据从父组件传递给子组件，再通过$emit触发自定义事件将数据从子组件传递给父组件。

4. $refs：可以通过$refs来获取子组件的引用，并直接操作子组件的数据和方法。

5. 使用第三方插件或库：有一些第三方插件或库可以简化非父子组件之间的通信，例如Vue Bus、vue-observable等。

以上是几种常见的方式，你可以根据具体需求选择适合的方式来实现非父子组件之间的通信。

相关问题

vue3父子组件的实现方式

在 Vue3 中，可以通过以下两种方式实现父子组件通信：

1. Props + Emit

父组件可以通过 props 给子组件传递数据，子组件可以通过 emit 触发自定义事件向父组件传递数据。

父组件代码：

<template>
  <child-component :message="parentMessage" @update:message="handleUpdateMessage"></child-component>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentMessage: 'Hello from Parent',
    };
  },
  methods: {
    handleUpdateMessage(message) {
      this.parentMessage = message;
    },
  },
};
</script>

子组件代码：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">Update Message</button>
  </div>
</template>

<script>
export default {
  props: {
    message: String,
  },
  methods: {
    handleClick() {
      this.$emit('update:message', 'Hello from Child');
    },
  },
};
</script>

2. Provide + Inject

父组件可以通过 provide 提供数据，子组件可以通过 inject 注入数据。

父组件代码：

<template>
  <child-component></child-component>
</template>

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

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

子组件代码：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">Update Message</button>
  </div>
</template>

<script>
export default {
  inject: ['parentMessage'],
  data() {
    return {
      message: this.parentMessage,
    };
  },
  methods: {
    handleClick() {
      this.message = 'Hello from Child';
    },
  },
};
</script>

以上两种方式都可以实现父子组件通信，具体选择哪种方式取决于实际需求和个人喜好。

vue3.0父子组件之间通讯

Vue 3.0 中，父子组件之间的通讯可以通过 props 和 emit 实现。

1. 父组件向子组件传递数据：

在父组件中使用子组件时，可以通过 props 将数据传递给子组件。具体实现如下：

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

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

在子组件中，可以通过 props 接收父组件传递过来的数据。具体实现如下：

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

<script>
export default {
  props: {
    message: String
  }
}
</script>

2. 子组件向父组件传递数据：

在子组件中，可以使用 emit 触发一个自定义事件，并向父组件传递数据。具体实现如下：

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

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

在父组件中使用子组件时，可以通过 v-on 监听子组件触发的自定义事件，并在事件处理函数中获取子组件传递过来的数据。具体实现如下：

<template>
  <div>
    <child-component @message="handleMessage"></child-component>
    <div>{{ receivedMessage }}</div>
  </div>
</template>

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

export default {
  data() {
    return {
      receivedMessage: ''
    }
  },
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message
    }
  }
}
</script>

以上就是 Vue 3.0 中父子组件之间通讯的实现方式。