首页  > 前端开发 > vue非父子组件传值, 非父子组件传值布景

vue非父子组件传值, 非父子组件传值布景

前端开发 2024-12-24 3

1. 运用大局事情总线（Event Bus）: 创立一个新的 Vue 实例作为事情总线。 在一个组件中运用 `$emit` 办法触发事情，并在另一个组件中运用 `$on` 办法监听这个事情。

2. 运用 Vuex: Vuex 是一个专为 Vue.js 运用程序开发的状况办理形式。 你能够在 Vuex 中界说大局状况，并在组件中经过 `mapState` 或 `mapGetters` 辅佐函数来拜访这些状况。

3. 运用 Vue 的 provide / inject API: `provide` 选项答应一个先人组件向其一切后代后代注入一个依靠，不管组件层次有多深，并在起上下游联系建立的时间里一直收效。 `inject` 选项答应一个后代组件接纳先人组件供给的数据。

4. 运用 Vue 的 `attrs` 和 `listeners`: 假如你的组件是作为一个根组件或许中心组件的子组件被运用，而且你想要传递数据到更深层级的子组件，你能够运用 `$attrs` 和 `$listeners`。

5. 运用 `$root`: 在 Vue 的根实例上增加数据，并在其他组件中经过 `this.$root` 拜访这些数据。

6. 运用 `$parent` 或 `$children`: 在某些情况下，假如你知道组件的父子联系，能够运用 `$parent` 或 `$children` 来拜访父组件或子组件的数据。

7. 运用 props / $emit: 尽管这种办法一般用于父子组件之间的通讯，但假如你能找到一种办法将一个组件嵌入到另一个组件中，你也能够运用 props 和 $emit 来完成非父子组件之间的通讯。

9. 运用第三方库: 有一些第三方库，如 `EventEmitter` 或 `mitt`，能够简化事情总线形式的运用。

挑选哪种办法取决于你的运用的具体需求和复杂性。关于大型运用，一般引荐运用 Vuex 或供给/注入，由于这些办法能够更好地安排和办理状况。关于小型运用或简略的场景，事情总线或许就足够了。

Vue非父子组件传值详解

在Vue.js的开发过程中，组件之间的通讯是必不可少的。除了父子组件之间的通讯，非父子组件之间的数据传递也是常见的场景。本文将具体介绍Vue中非父子组件传值的办法，协助开发者更好地了解和运用这一技能。

非父子组件传值布景

在Vue中，组件之间的联系能够分为父子联系和非父子联系。父子组件之间经过props和events进行通讯，而非父子组件之间则没有直接的父子联系，因而需求经过其他办法来完成数据传递。

非父子组件传值办法

1. 运用事情总线（Event Bus）

事情总线是一种简略且常用的非父子组件传值办法。它经过创立一个大局的事情办理器，使得组件之间能够经过事情监听和触发来完成数据传递。

完成过程：

1. 创立一个事情总线目标，一般是一个Vue实例。

2. 在需求发送数据的组件中，运用`$bus.$emit('事情名', 数据)`来触发事情。

3. 在需求接纳数据的组件中，运用`$bus.$on('事情名', 回调函数)`来监听事情，并在回调函数中处理数据。

示例代码：

```javascript

// 创立事情总线

const bus = new Vue();

// 发送数据的组件

bus.$emit('data-event', { message: 'Hello from Child!' });

// 接纳数据的组件

bus.$on('data-event', (data) => {

console.log(data.message); // 输出：Hello from Child!

2. 运用Vuex

Vuex是Vue.js官方的状况办理形式和库，它经过会集存储办理一切组件的状况，完成组件之间的状况同享。

完成过程：

1. 在Vuex的store中界说大局状况。

2. 在需求修正状况的组件中，运用`this.$store.commit('mutationName', 数据)`来提交mutation。

3. 在需求获取状况的组件中，运用`this.$store.state.stateName`来获取数据。

示例代码：

```javascript

// Vuex store

const store = new Vuex.Store({

state: {

message: 'Hello from Vuex!'

},

mutations: {

updateMessage(state, payload) {

state.message = payload;

}

// 发送数据的组件

store.commit('updateMessage', { message: 'Hello from Child!' });

// 接纳数据的组件

console.log(store.state.message); // 输出：Hello from Child!

3. 运用$refs

在Vue中，父组件能够经过`$refs`特点拜访子组件的实例，然后完成非父子组件之间的数据传递。

完成过程：

1. 在父组件中，经过`ref`特点为子组件设置一个引证名。

2. 在父组件中，运用`this.$refs.引证名`来拜访子组件的实例。

3. 在子组件中，经过`this.$parent`来拜访父组件的实例，并运用`this.$parent.$refs.引证名`来拜访父组件的实例。

示例代码：

```javascript

// 父组件


相关

Copyright © 2016-2028零基础教程 Rights Reserved. XML地图