父组件:父组件引入子组件时,通过
子组件传值。
备注:这种方式父传值很方便,但是传递给后代组件不推荐(父->子->孙),且这种方式父组件不能直接修改父组件传过来的数据。
父组件
子组件:子组件通过props即props:{ parentValue:{ type:String, default:"" } }
来接收父组件传过来的值
子组件
{{parentValue}}
this.$parent.xxx
子组件直接使用父组件的值备注:这种方式,子组件可以直接修改父组件的数据。
父组件:正常引入子组件
父组件
子组件:通过this.$parent.parentValue
获取父组件的数据。
子组件
我是通过this.$parent.xxx直接获取父组件的值:
{this.$parent.parentValue}}-->{{parentValueToSon}}
备注:这种方式父组件可以直接向某个后代组件传值,不用再一级一级的传递。
缺点:很难去找这个值是从哪个组件传递过来的。
父组件:通过provide
定义需要传递给后代的数据。
父组件
子组件:
子组件
我是通过this.$parent.xxx直接获取父组件的值:
{this.$parent.parentValue}}-->{{parentValueToSon}}
孙子组件:通过inject
注入爷爷辈组件传递过来的值。
孙子组件
获取到的爷爷辈组件传递过来的值:
{{parentProvideValue}}
效果图:
父子组件一般会触发交互行为(子组件传递过来的值放在生命周期函数里是传不过来的),所以可以通过父子的交互行为获取到子组件传递过来的数据。
父组件:通过子组件自定义的函数进行绑定接收传递过来的数据。
父组件
接收到子组件传递过来的值:{{getSonToParentValue}}
子组件:通过this.emit("function",param)子组件通过emit("function",param) 子组件通过emit("function",param)子组件通过emit传递一个函数和参数,父组件通过传递过来的函数接收参数即传过来的值。
子组件
效果图:
父组件:this.$children[0].childValue
获取子组件数据,只有一个子组件故下标为0.
父组件
接收到子组件传递过来的值:{{getSonToParentValue}}
子组件:
子组件
父组件:
父组件
接收到子组件传递过来的值:{{getSonToParentValue}}
子组件与上述相同。
方式一:通过中转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();
传值的兄弟组件:
子组件
接收值的兄弟组件:
孙子组件
兄弟组件传递过来的值:{{eventBusValue}}
效果图: