写点什么

Vue 组件间的传值五大场景,你造吗?

发布于: 13 小时前

​​摘要:组件是 vue.js 最强大的功能之一,这五个组件间传值场景你了解吗?


本文分享自华为云社区《你了解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>
复制代码


看运行效果,成功获取:



点击关注,第一时间了解华为云新鲜技术~

发布于: 13 小时前阅读数: 6
用户头像

提供全面深入的云计算技术干货 2020.07.14 加入

华为云开发者社区,提供全面深入的云计算前景分析、丰富的技术干货、程序样例,分享华为云前沿资讯动态,方便开发者快速成长与发展,欢迎提问、互动,多方位了解云计算! 传送门:https://bbs.huaweicloud.com/

评论

发布
暂无评论
Vue组件间的传值五大场景,你造吗?