Vue 组件之间传值的主要方法
作者：忧郁的蛋~
一、Vue 组件之间传值的主要方法
Vue 3 对于组件之间传递值的基本思想与 Vue 2 相似，但是有一些语法和 API 上的改变，主要的传值方法有以下几种：
1、父组件向子组件传值，使用 props：可以通过在子组件上绑定 props，然后在父组件中通过 v-bind 绑定相应的数据来传递数据。
2、子组件向父组件传值，使用 $emit：可以通过在子组件中使用 $emit 触发自定义事件，并在父组件中使用 v-on 监听相应的事件来传递数据。
3、兄弟组件之间传值：可以通过使用一个共同的父组件，然后将需要共享的数据放在父组件的 data 中，再通过 props 将数据传递给各自的子组件。
4、跨级组件传值，使用 provide 和 inject（同样适用于父子组件传值）：provide 可以在祖先组件中定义一个值或者方法，然后在子孙组件中使用 inject 来注入这个值或者方法。
5、使用全局事件总线：可以使用 Vue 的事件机制，通过在 Vue 实例上使用 $on 来监听事件，然后在其他组件中使用 $emit 触发相应的事件来传递数据。这种方式可以在任意组件之间传递数据。
6、使用 Vuex：当应用的数据状态比较复杂或者需要在多个组件之间共享时，可以使用 Vuex，它是一个专为 Vue.js 应用程序开发的状态管理模式。可以在任何组件中访问和修改 Vuex 存储的数据，通过 mutations 来修改状态，通过 actions 来触发 mutations。这种方式可以方便地在不同的组件中进行状态管理和数据共享。
7、使用 $attrs 和 $listeners，$attrs 和 $listeners 是常用的两个特殊属性，它们可以用来向组件传递属性和事件监听器。
8、使用 $refs：可以使用 Vue 提供的 $refs 属性来获取组件实例，然后通过调用组件的方法来进行数据传递。这种方式不推荐使用，因为不易维护和调试。
9、使用事件总线库：可以使用 Vue.js 的第三方库如 Event Bus、Tiny-Emmiter 等来传递数据。这些库提供了一种方便、简单的方式来在不同的组件之间进行事件传递。但是需要注意，使用第三方库可能会增加项目的复杂性和维护成本。
二、Vue 2 组件之间传值示例代码
1、父组件向子组件传值，使用 props：可以通过在子组件上绑定 props，然后在父组件中通过 v-bind 绑定相应的数据来传递数据。
父组件中的代码：
<template>
<div>
<child-component :prop-a="dataA"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
dataA: 'data from parent',
};
},
};
</script>子组件中的代码：
<template>
<div>
{{ propA }}
</div>
</template>
<script>
export default {
props: {
propA: String,
},
};
</script>
<template>
<div>
{{ propA }}
</div>
</template>
<script>
export default {
props: {
propA: String,
},
};
</script>2、子组件向父组件传值，使用 $emit：可以通过在子组件中使用 $emit 触发自定义事件，并在父组件中使用 v-on 监听相应的事件来传递数据。
子组件中的代码：
<template>
<div>
<button @click="sendDataToParent">Send Data To Parent</button>
</div>
</template>
<script>
export default {
data() {
return {
dataB: 'data from child',
};
},
methods: {
sendDataToParent() {
this.$emit('send-data', this.dataB);
},
},
};
</script>父组件中的代码：
<template>
<div>
<child-component @send-data="receiveDataFromChild"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
receiveDataFromChild(dataB) {
console.log(dataB);
},
},
};
</script>3、兄弟组件之间传值：可以通过使用一个共同的父组件，然后将需要共享的数据放在父组件的 data 中，再通过 props 将数据传递给各自的子组件。
父组件中的代码：
<template>
<div>
<child-a :prop-a="dataA"></child-a>
<child-b :prop-b="dataB"></child-b>
</div>
</template>
<script>
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';
export default {
components: {
ChildA,
ChildB,
},
data() {
return {
dataA: 'data from parent to child a',
dataB: 'data from parent to child b',
};
},
};
</script>子组件 A 中的代码：
<template>
<div>
{{ propA }}
</div>
</template>
<script>
export default {
props: {
propA: String,
},
};
</script>子组件 B 中的代码：
<template>
<div>
{{ propB }}
</div>
</template>
<script>
export default {
props: {
propB: String,
},
};
</script>4、跨级组件传值，使用 provide 和 inject（该方法也可用于父子组件传值）：provide 可以在祖先组件中定义一个值或者方法，然后在子孙组件中使用 inject 来注入这个值或者方法。
祖先组件中的代码：
<template>
<div>
<child-a></child-a>
</div>
</template>
<script>
import ChildA from './ChildA.vue';
export default {
components: {
ChildA,
},
provide() {
return {
sharedData: 'data from ancestor',
};
},
};
</script>子孙组件 A 中的代码：
<template>
<div>
{{ sharedData }}
</div>
</template>
<script>
export default {
inject: ['sharedData'],
};
</script>5、使用全局事件总线：可以使用 Vue 的事件机制，通过在 Vue 实例上使用 $on 来监听事件，然后在其他组件中使用 $emit 触发相应的事件来传递数据。这种方式可以在任意组件之间传递数据。
在 main.js 中定义一个空的 Vue 实例作为事件总线：
import Vue from 'vue'; export const bus = new Vue();
子组件 A 中的代码：
<template>
<div>
<button @click="sendDataToSibling">Send Data To Sibling</button>
</div>
</template>
<script>
import { bus } from './main';
export default {
methods: {
sendDataToSibling() {
bus.$emit('send-data', 'data from child a');
},
},
};
</script>子组件 B 中的代码：
<template>
<div>
{{ dataFromSibling }}
</div>
</template>
<script>
import { bus } from './main';
export default {
data() {
return {
dataFromSibling: '',
};
},
mounted() {
bus.$on('send-data', (data) => {
this.dataFromSibling = data;
});
},
};
</script>6、使用 Vuex：当应用的数据状态比较复杂或者需要在多个组件之间共享时，可以使用 Vuex，它是一个专为 Vue.js 应用程序开发的状态管理模式。可以在任何组件中访问和修改 Vuex 存储的数据，通过 mutations 来修改状态，通过 actions 来触发 mutations。这种方式可以方便地在不同的组件中进行状态管理和数据共享。
在 store.js 中定义一个 Vuex store：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
dataC: 'data from Vuex',
},
mutations: {
updateDataC(state, payload) {
state.dataC = payload;
},
},
});
export default store;子组件 A 中的代码：
<template>
<div>
<button @click="sendDataToSibling">Send Data To Sibling</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
methods: {
...mapMutations(['updateDataC']),
sendDataToSibling() {
this.updateDataC('data from child a');
},
},
};
</script>子组件 B 中的代码：
<template>
<div>
{{ dataC }}
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['dataC']),
},
};
</script>7、父子组件传值，使用 $attrs 和 $listeners：
$attrs 是一个包含了父组件传递给子组件的所有属性的对象，可以在子组件中通过访问 $attrs 来获取这些属性。如果不希望某些属性传递到子组件中，可以在子组件中使用 v-bind="$attrs" 并指定排除的属性名称，或者在父组件中使用 .sync 修饰符，将属性绑定到子组件的一个名为 $attrs 的属性上。
$listeners 是一个包含了父组件传递给子组件的所有事件监听器的对象，可以在子组件中通过访问 $listeners 来获取这些事件监听器。如果需要在子组件中监听某个事件，可以使用 v-on="$listeners" 将所有的事件监听器绑定到子组件上。
$attrs 和 $listeners 是常用的两个特殊属性，它们可以用来向组件传递属性和事件监听器。假设我们有一个父组件和一个子组件，子组件需要接收父组件的一些属性和事件监听器，同时还需要把这些属性和事件传递给子组件的某个子元素。
父组件中的代码：
<template>
<div>
<child-component :title="title" v-on:click="handleClick" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: { ChildComponent },
data() {
return {
title: 'Hello World',
};
},
methods: {
handleClick() {
console.log('Button Clicked');
},
},
};
</script>子组件中的代码：
<template>
<div>
<button @click="$emit('click')">Click me</button>
<div v-bind="$attrs">
<slot />
</div>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: {
title: {
type: String,
default: '',
},
},
mounted() {
console.log(this.$attrs);
console.log(this.$listeners);
},
};
</script>在子组件中，我们使用 v-bind="$attrs" 把所有父组件传递过来的属性绑定到子元素上。同时，我们使用 $emit('click') 来触发父组件传递过来的点击事件。
在子组件 中，需要设置 inheritAttrs: false，来禁止自动将父组件传递的属性绑定到子组件的根元素上。这样，我们就可以使用 v-bind="$attrs" 把所有属性绑定到子元素上。
在 mounted 钩子中，我们可以通过 this.$attrs 和 this.$listeners 来分别访问所有属性和事件监听器。这样，我们就可以在子组件中使用这些属性和事件了。
8、使用 $refs：可以使用 Vue 提供的 $refs 属性来获取组件实例，然后通过调用组件的方法来进行数据传递。这种方式不推荐使用，因为不易维护和调试。
9、使用事件总线库：可以使用 Vue.js 的第三方库如 Event Bus、Tiny-Emmiter 等来传递数据。这些库提供了一种方便、简单的方式来在不同的组件之间进行事件传递。但是需要注意，使用第三方库可能会增加项目的复杂性和维护成本。
三、Vue 3 组件之间传值示例代码
1、Props
Props 是一种在组件之间传递数据的方式，通过在组件标签上使用属性绑定，父组件可以向子组件传递数据。在子组件中，通过在 props 中定义对应的属性名，可以获取到父组件传递过来的数据。
例如，父组件中的模板：
<template>
<child-component :message="hello"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
hello: 'Hello from parent!'
};
}
};
</script>子组件中的模板：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: String
}
};
</script>2、$emit
$emit 是一种在子组件中触发事件的方式，通过在子组件中使用 $emit 方法，可以向父组件发送数据。在父组件中，通过在子组件标签上使用 v-on 或 @ 语法，可以监听子组件触发的事件，并获取子组件发送的数据。
例如，子组件中的模板：
<template>
<button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Hello from child!');
}
}
};
</script>父组件中的模板：
<template>
<child-component @message-sent="receiveMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
receiveMessage(message) {
console.log(message);
}
}
};
</script>3、Provide/Inject
Provide/Inject 是一种在祖先组件和后代组件之间共享数据的方式。通过在祖先组件中使用 provide 方法提供数据，在后代组件中使用 inject 方法获取数据。
例如，祖先组件中的模板：
<template>
<child-component></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
provide() {
return {
message: 'Hello from ancestor!'
};
}
};
</script>后代组件中的模板：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
inject: ['message']
};
</script>4、$attrs 和 $listeners
$attrs 和 $listeners 是在 Vue 2 中引入的特性，但在 Vue 3 中也得到了支持。
例如，父组件中的模板：
<template>
<child-component message="Hello from parent!" @click="handleClick"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
methods: {
handleClick() {
console.log('Clicked!');
}
}
};
</script>子组件中的模板：
<template>
<div v-bind="$attrs" v-on="$listeners">{{ message }}</div>
</template>
<script>
export default {
props: {
message: String
}
};
</script>5、provide/inject 与 props 的结合使用
在 Vue 3 中，provide 和 inject 可以与 props 结合使用，从而实现一种高级的数据传递方式。具体做法是，在祖先组件中使用 provide 方法提供数据，并在后代组件中使用 inject 方法获取数据；同时，在后代组件中，可以在 props 中声明和接收数据，从而实现数据的类型检查和默认值设定。
例如，祖先组件中的模板：
<template>
<child-component></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
provide() {
return {
message: 'Hello from ancestor!'
};
}
};
</script>后代组件中的模板：
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
inject: ['message'],
props: {
message: {
type: String,
default: 'Hello from default!'
}
}
};
</script>在上面的例子中，子组件会首先从祖先组件中获取名为 message 的数据，如果没有提供，则使用默认值 Hello from default!。在子组件中，props 会覆盖 provide/inject，因此如果父组件和子组件都提供了同一个属性，子组件中的 props 值会覆盖 provide/inject 中的值。
6、Vuex
Vuex 是一种专门用于管理应用程序状态的库，可以用于跨组件传递数据。在 Vuex 中，可以定义一个全局的状态管理器，所有的组件都可以通过 getter 和 setter 方法访问和修改这个状态管理器中的数据。
例如，定义一个 Vuex store：
import { createStore } from 'vuex';
const store = createStore({
state: {
message: 'Hello from store!'
},
mutations: {
updateMessage(state, message) {
state.message = message;
}
},
getters: {
getMessage(state) {
return state.message;
}
}
});
export default store;在组件中使用 Vuex：
<template>
<div>{{ message }}</div>
<button @click="updateMessage">Update message</button>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
computed: {
...mapGetters(['getMessage'])
},
methods: {
...mapMutations(['updateMessage'])
}
};
</script>在这个例子中，组件通过 mapGetters 方法将 Vuex store 中的 getMessage 方法映射为组件中的计算属性，从而获取 Vuex store 中的数据；同时，通过 mapMutations 方法将 Vuex store 中的 updateMessage 方法映射为组件中的方法，从而修改 Vuex store 中的数据。
7、EventBus
EventBus 是一种自定义事件总线，可以用于在任意组件之间传递数据。在 EventBus 中，可以定义一个全局的事件中心，所有的组件都可以通过 $on 和 $emit 方法监听和触发自定义事件。
例如，定义一个 EventBus：
import mitt from 'mitt'; const bus = mitt(); export default bus;
在组件中使用 EventBus：
<template>
<div>{{ message }}</div>
<button @click="updateMessage">Update message</button>
</template>
<script>
import bus from './event-bus';
export default {
data() {
return {
message: 'Hello from component!'
};
},
methods: {
updateMessage() {
this.message = 'New message!';
bus.emit('message-updated', this.message);
}
},
created() {
bus.on('message-updated', message => {
console.log(message);
});
}
};
</script>在这个例子中，组件中的 updateMessage 方法通过 EventBus 的 emit 方法触发了一个名为 message-updated 的自定义事件，并将修改后的消息作为参数传递给事件处理函数；同时，在组件的 created 生命周期钩子中，通过 EventBus 的 on 方法监听名为 message-updated 的自定义事件，并在事件处理函数中打印接收到的消息。
总之，Vue 3 中组件之间传值的方式很多，可以根据具体的场景选择最适合的方式。使用 props 和 $emit 可以实现父子组件之间的传值，使用 provide 和 inject 可以实现祖先组件向后代组件的传值，使用 Vuex 和 EventBus 可以实现任意组件之间的传值。在选择组件传值方式时，还应该考虑数据的安全性、可维护性和性能等因素。
四、Vue 2 和 Vue 3 组件之间传值的区别
Vue 2 和 Vue 3 之间在组件之间传递值的方法有一些不同之处。下面是一些主要的区别：
Props
在 Vue 2 中，父组件通过 props 把数据传递给子组件。子组件可以在 props 选项中声明它们需要的 props，然后在组件的模板中使用它们。
在 Vue 3 中，props 的使用与 Vue 2 类似，但有一些重要的变化。首先，props 的声明方式已经发生了变化，现在使用 ES6 的解构语法来声明。其次，Vue 3 强制 props 的类型检查，并提供了更多的选项来控制 props 的行为，例如默认值和必需性等。
Emit
在 Vue 2 中，子组件通过 emit 向父组件发送消息。子组件可以使用 this.$emit 方法触发一个自定义事件，并可以传递任意数据作为事件的参数。父组件可以监听子组件触发的事件，并在事件处理程序中处理传递的数据。
在 Vue 3 中，emit 的使用与 Vue 2 相似，但也有一些重要的变化。首先，Vue 3 引入了新的 setup() API，该 API 取代了 Vue 2 中的 created 和 mounted 等生命周期钩子函数。其次，emit 的使用方式已经改变，现在使用 v-model 代替 this.$emit。v-model 是一个语法糖，允许在父子组件之间双向绑定数据。
Provide/Inject
在 Vue 2 中，父组件可以通过 provide 方法向子组件传递数据，子组件可以使用 inject 方法获取数据。provide 和 inject 允许在组件树中的任何地方传递数据，而不需要通过 props 一级一级地传递。
在 Vue 3 中，provide 和 inject 的使用方式与 Vue 2 相同。但是，Vue 3 提供了新的 reactive 和 readonly 方法，允许在 provide 中提供响应式的数据。这意味着，如果在 provide 中提供的数据发生变化，子组件中使用这些数据的地方也会相应地更新。
Vue 3 对于组件之间传递值的基本思想与 Vue 2 相似，但是有一些语法和 API 上的改变。这些变化旨在提供更好的类型检查、更好的性能和更好的开发体验。
到此这篇关于Vue 组件之间传值的主要方法的文章就介绍到这了,更多相关Vue 组件之间传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！