一、父传子、父传后代

方式一:子通过props来接收


父组件:父组件引入子组件时,通过子组件传值。

备注:这种方式父传值很方便,但是传递给后代组件不推荐(父->子->孙),且这种方式父组件不能直接修改父组件传过来的数据。

父组件

import Child from "./child";export default {name: 'parent',components: {Child},data () {return {parentValue:"父组件内的值"}}}

子组件:子组件通过props即props:{ parentValue:{ type:String, default:"" } }来接收父组件传过来的值

子组件


{{parentValue}}export default {name: 'child',props:{parentValue:{type:String,default:""}},data () {return {}},}

方式二:通过this.$parent.xxx子组件直接使用父组件的值

备注:这种方式,子组件可以直接修改父组件的数据。


父组件:正常引入子组件

父组件

import Child from "./child";export default {name: 'parent',components: {Child},data () {return {parentValue:"父组件内的值"}}}

子组件:通过this.$parent.parentValue获取父组件的数据。

子组件

我是通过this.$parent.xxx直接获取父组件的值:
<!--{{this.$parent.parentValue}}-->{{parentValueToSon}}export default {name: 'child',data () {return {parentValueToSon:"",}},created() {this.parentValueToSon = this.$parent.parentValue;}}

方式三:依赖注入provide/inject

备注:这种方式父组件可以直接向某个后代组件传值,不用再一级一级的传递。

缺点:很难去找这个值是从哪个组件传递过来的。


父组件:通过provide定义需要传递给后代的数据。

父组件


import Child from "./child";export default {name: 'parent',components: {Child},data () {return {}},//通过依赖注入方式传递给后代的数据provide(){return{parentProvideValue:"依赖的父组件的值"}}}

子组件:

子组件

我是通过this.$parent.xxx直接获取父组件的值:
<!--{{this.$parent.parentValue}}-->{{parentValueToSon}}

孙子组件:通过inject注入爷爷辈组件传递过来的值。

孙子组件

获取到的爷爷辈组件传递过来的值:
{{parentProvideValue}}export default {name: 'grandson',//获取父组件传递过来的值inject:['parentProvideValue'],data () {return {}}}

效果图:

二、子传父、后代传父

方式一:this.$emit(“function”,param)

子组件通过$emit传递一个函数和参数,父组件通过传递过来的函数接收参数即传过来的值。

父子组件一般会触发交互行为(子组件传递过来的值放在生命周期函数里是传不过来的),所以可以通过父子的交互行为获取到子组件传递过来的数据。


父组件:通过子组件自定义的函数进行绑定接收传递过来的数据。

父组件

接收到子组件传递过来的值:{{getSonToParentValue}}
import Child from "./child";export default {name: 'parent',components: {Child},data () {return {getSonToParentValue:"",}},mounted() {},methods:{tansToParent(val) {this.getSonToParentValue = val;console.log("子组件传递过来的值",val)}}}

子组件:通过this. e m i t ( ” f u n c t i o n ” , p a r a m ) 子组件通过emit(“function”,param) 子组件通过emit(function,param)子组件通过emit传递一个函数和参数,父组件通过传递过来的函数接收参数即传过来的值。

子组件


import Grandson from "./grandson";export default {name: 'child',components: {Grandson},data () {return {childValue:"子组件传递给父组件的值",}},created() {},methods:{toParentValue(){//通过this.$emit给父组件传值this.$emit('tansToParent',this.childValue)}}}

效果图:

方式二:this.$child.xxx直接获取子组件数据,且可直接修改子组件的数据。

父组件:this.$children[0].childValue获取子组件数据,只有一个子组件故下标为0.

父组件

接收到子组件传递过来的值:{{getSonToParentValue}}
import Child from "./child";export default {name: 'parent',components: {Child},data () {return {getSonToParentValue:"",}},mounted() {this.getSonToParentValue = this.$children[0].childValue}}

子组件:

子组件


import Grandson from "./grandson";export default {name: 'child',components: {Grandson},data () {return {childValue:"子组件传递给父组件的值",}},created() {},methods:{}}

方式三:通过ref/refs获取子组件dom从而直接获取子组件数据。可直接修改子组件数据。

父组件:

父组件

接收到子组件传递过来的值:{{getSonToParentValue}}
import Child from "./child";export default {name: 'parent',components: {Child},data () {return {getSonToParentValue:"",}},mounted() {this.getSonToParentValue = this.$refs.childDom.childValue}}

子组件与上述相同。

三、兄弟组件传值

方式一:通过中转eventBus.js工具类

新建一个中转eventBus.js工具类,传值的兄弟组件自定义一个函数通过

eventBus.$emit('function',参数);

给接收值的兄弟组件传一个约定好的function名称及参数(即传递的值);接收值的兄弟组件通过

eventBus.$on('function',val=>{console.log("传递过来的值",val)})

来接收传递过来的值。


eventBus.js:

import Vue from 'vue'export default new Vue();

传值的兄弟组件:

子组件

import Grandson from "./grandson";import eventBus from "../utills/eventBus";export default {name: 'child',components: {Grandson},data () {return {transToBrother:"这是传递给兄弟组件的值",}},methods:{toBrother(){eventBus.$emit('toBrotherFunc',this.transToBrother);}}}

接收值的兄弟组件:

孙子组件

兄弟组件传递过来的值:{{eventBusValue}}import eventBus from "../utills/eventBus";export default {name: 'grandson',data () {return {eventBusValue:"",}},created() {eventBus.$on('toBrotherFunc',val=>{this.eventBusValue = val;})}}

效果图: