vue组件间传值的方式和优缺点（Vue组件间的传值五大场景）
vue组件间传值的方式和优缺点（Vue组件间的传值五大场景）<template> <div> <h2>子组件区域</h2> <!-- 第二步：得定义一个向父组件传值的方法，比如定义一个按钮， 绑定一个点击事件，触发giveFather方法 --> <button @click="giveFather">giveFather</button> </div> </template> <script> export default { data() { return { // 第一步：我们将要把变量 word 的值传给父组件 word: "北极光之夜。" }; } methods: { // 第三：定义
此账号为华为云开发者社区官方运营账号，提供全面深入的云计算前景分析、丰富的技术干货、程序样例，分享华为云前沿资讯动态
本文分享自华为云社区《你了解Vue组件间传值五大场景吗？》，作者：北极光之夜。 。
父组件向子组件传值：比如有一个 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 的值传给子组件Children
num: 666
};
}
components: {
Children
}
};
</script>
子组件 Children.vue 内容，注意里面的操作步骤：
<template>
<div>
<h2>子组件区域</h2>
<!-- 第四步：在子组件显示父组件传过来的值 -->
<i>父组件传递过了的值:{{ num }}</i>
</div>
</template>
<script>
export default {
//第三步： 子组件可以通过定义的props就可以接收来自父组件的变量值 num
props: ["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 和 $ 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.vue
num: "北极光之夜"
};
}
// 第二步，定义一个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.要传递值的变量名
//赋值给num
num: this.giveAfter.num
};
}
};
</script>
看运行效果，成功获取：
点击关注，第一时间了解华为云新鲜技术~华为云博客_大数据博客_AI博客_云计算博客_开发者中心-华为云
