vue组件间的5种传值方式

父组件向子组件传值：

比如有一个 Father.vue 的父组件要传值给 Children.vue 的子组件，完成共需四步：

父组件 Father.vue 内容，注意里面的操作步骤：

<template><div><h2>父组件区域</h2><hr /><!-- 第二步：在引用的子组件标签里定义 :num="num" , num就是要传递的变量--><Children :num="num"></Children></div> </template><script> // 引入子组件 import Children from "./Children.vue"; export default {data() {return {// 第一步：我们将要把变量 num 的值传给子组件Childrennum: 666,};},components: {Children,}, }; </script>

子组件 Children.vue 内容，注意里面的操作步骤：

<template><div><h2>子组件区域</h2><!-- 第四步：在子组件显示父组件传过来的值 --><i>父组件传递过了的值:{{ num }}</i></div> </template> <script> export default {//第三步： 子组件可以通过定义的props就可以接收来自父组件的变量值 numprops: ["num"],data() {return {};}, }; </script>

运行效果

子组件向父组件传值：

比如有一个 Children.vue 的子组件要传值给 Father.vue 的父组件，完成共需六步：

子组件 Children.vue 内容，注意里面的操作步骤：

<template><div><h2>子组件区域</h2><!-- 第二步：得定义一个向父组件传值的方法，比如定义一个按钮，绑定一个点击事件，触发giveFather方法 --><button @click="giveFather">giveFather</button></div> </template> <script> export default {data() {return {// 第一步：我们将要把变量 word 的值传给父组件word: "北极光之夜。",};},methods: {// 第三：定义子组件向父组件传值的事件方法giveFather() {// 第四步：可以通过$emit传值给父组件,第一个参数为传值的方法，第二个参数为要传递的值this.$emit("giveFather", this.word);},}, }; </script>

父组件 Father.vue 内容，注意里面的操作步骤：

<template><div><h2>父组件区域</h2><hr /><!-- 第五步：要在引用的子组件标签里定义一个自定义事件，该自定义事件要写为子组件$emit的第一个参数一样,然后双引号里的方法可以自定义，我这就为getSon --><Children @giveFather="getSon"></Children></div> </template><script> // 引入子组件 import Children from "./Children.vue";export default {data() {return {};},components: {Children,},methods: {//第六步：定义获取子组件值的方法，该方法的参数就为子组件传递过来的值getSon(temp) {// 控制台输出看看能不能获取console.log(temp);},}, }; </script>

运行效果

兄弟组件间传值：

比如有一个 Father.vue 的父组件，它有一个Children.vue 的子组件和一个Son.vue 的子组件，那么，Children.vue 和 Son.vue 就是兄弟关系，现在 Children.vue 要向兄弟 Son.vue 传值：

首先在vue原型上定义一个新的实例，main.js文件内容，注意里面的操作步骤：

import Vue from 'vue' import App from './App.vue'Vue.config.productionTip = false// 第一步，在vue原型上定义一个自己的方法，一般叫$bus，为vue实例 Vue.prototype.$bus = new Vue();new Vue({render: h => h(App), }).$mount('#app')

Children.vue 内容，注意里面的操作步骤：

<template><div><h2>Children子组件区域</h2><!-- 第三步：定义一个向兄弟组件传值的方法，比如定义一个按钮，绑定一个点击事件，触发giveSon方法 --><button @click="giveSon">giveSon</button></div> </template> <script> export default {data() {return {// 第二步：我们将要把变量 word 的值传给兄弟组件word: "北极光之夜。",};},methods: {// 第四：定义子组件向兄弟组件传值的事件方法giveSon() {// 第五步：可以通过自定义的$bus的$emit传值给兄弟组件,//第一个参数为传值的方法，第二个参数为要传递的值this.$bus.$emit("giveSon", this.word);},}, }; </script>

Son.vue 内容，注意里面的操作步骤：

<template><div><h2>Son子组件区域</h2></div> </template> <script> export default {data() {return {};},created() {//第六步：通过$on方法进行获取兄弟传递过来的值。//第一个参数为兄弟组件传值的方法，第二个参数是自定义的方法this.$bus.$on("giveSon", this.getSon);},methods: {//第七步，自定义的方法,参数就是兄弟传过来的值getSon(temp) {//输出看看console.log(temp);},}, }; </script

运行效果

总结就是，在vue原型上定义一个新的实例， 然后采用 emit 和emit和 on 这两个方法进行获取传递过来的值。

使用Vuex状态机传值：

Vuex是实现组件全局状态(数据)管理的一种机制，可以很方便的实现组件之间数据的共享。

关于Vuex的详细使用，可以看这篇文章，指路👉：https://auroras.blog.csdn.net/article/details/117536679

给后代组件传值，provide和inject：

比如有一个 Father.vue 的父组件，它有一个Children.vue 的子组件，那么这个Children.vue 的子组件是他的后代。而若Children.vue 也有一个子组件 grandSon.vue，那么grandSon.vue 就相当于 Father.vue的孙子组件，同样，grandSon.vue也会是Father.vue的后代。以此类推，它的孙子，孙子的孙子等等都是它后代。现在我们实现Father.vue 给它的后代grandSon.vue孙子组件传值：

父组件 Father.vue 内容，注意里面的操作步骤：

<template><div><h2>父组件区域</h2><hr /><Children></Children></div> </template><script> // 引入子组件 import Children from "./Children.vue"; export default {data() {return {// 第一步：定义一个变量，我们将要把变量 num 的值传给后代组件grandSon.vuenum: "北极光之夜",};},// 第二步，定义一个provide函数provide() {//第三步，如下定义，给后代接收//giveAfter名称为自己定义，任意起，this固定写法return {giveAfter: this,};},components: {Children,}, }; </script>

子组件Children.vue 内容，没什么，引入子组件就行：

<template><div><h2>Children子组件区域<hr /><Grand-son></Grand-son></h2></div> </template> <script> // 引入子组件 import GrandSon from "./GrandSon.vue"; export default {data() {return {};},components: {GrandSon,}, }; </script>

孙子组件GrandSon.vue 内容，注意里面的操作步骤：

<template><div>GrandSon孙子组件区域<!-- 第六步：展示数据 --><i> {{ num }}</i></div> </template> <script> export default {//第四步：定义inject,里面写祖先组件自定义的名称inject: ["giveAfter"],data() {return {// 第五步：取得祖先组件传的值，this.giveAfter.要传递值的变量名//赋值给numnum: this.giveAfter.num,};}, }; </script>

运行效果

总结

以上是生活随笔为你收集整理的vue组件间的5种传值方式的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。