广东同江医院网站建设,智能建站工具,网站开发过程和里程碑,做网站的市场一、父传子、父传后代
方式一#xff1a;子通过props来接收 父组件#xff1a;父组件引入子组件时#xff0c;通过child :parentValue parentValue/child子组件传值。
备注#xff1a;这种方式父传值很方便#xff0c;但是传递给后代组件不…一、父传子、父传后代
方式一子通过props来接收 父组件父组件引入子组件时通过child :parentValue parentValue/child子组件传值。
备注这种方式父传值很方便但是传递给后代组件不推荐(父-子-孙),且这种方式父组件不能直接修改父组件传过来的数据。
templatedivh1父组件/h1child :parentValue parentValue/child/div
/templatescriptimport Child from ./child;export default {name: parent,components: {Child},data () {return {parentValue:父组件内的值}}}
/script
style scoped/style子组件子组件通过props即props:{ parentValue:{ type:String, default: } }来接收父组件传过来的值
templatedivh2子组件/h2hrspan{{parentValue}}/span/div
/templatescriptexport default {name: child,props:{parentValue:{type:String,default:}},data () {return {}},}
/script
style scoped/style方式二通过this.$parent.xxx子组件直接使用父组件的值
备注这种方式子组件可以直接修改父组件的数据。 父组件正常引入子组件
templatedivh1父组件/h1child/child/div
/templatescriptimport Child from ./child;export default {name: parent,components: {Child},data () {return {parentValue:父组件内的值}}}
/script子组件通过this.$parent.parentValue获取父组件的数据。
templatedivh2子组件/h2span我是通过this.$parent.xxx直接获取父组件的值/spanbr
!-- span{{this.$parent.parentValue}}/span--span{{parentValueToSon}}/span/div
/templatescriptexport default {name: child,data () {return {parentValueToSon:,}},created() {this.parentValueToSon this.$parent.parentValue;}}
/script方式三依赖注入provide/inject
备注这种方式父组件可以直接向某个后代组件传值不用再一级一级的传递。
缺点很难去找这个值是从哪个组件传递过来的。 父组件通过provide定义需要传递给后代的数据。
templatedivh1父组件/h1hrchild/child/div
/templatescriptimport Child from ./child;export default {name: parent,components: {Child},data () {return {}},//通过依赖注入方式传递给后代的数据provide(){return{parentProvideValue:依赖的父组件的值}}}
/script子组件
templatedivh2子组件/h2span我是通过this.$parent.xxx直接获取父组件的值/spanbr!--span{{this.$parent.parentValue}}/span--span{{parentValueToSon}}/spanhrgrandson/grandson/div
/template孙子组件通过inject注入爷爷辈组件传递过来的值。
templatedivh3孙子组件/h3span获取到的爷爷辈组件传递过来的值/spanbrspan{{parentProvideValue}}/span/div
/templatescriptexport default {name: grandson,//获取父组件传递过来的值inject:[parentProvideValue],data () {return {}}}
/script
style scoped/style效果图 二、子传父、后代传父
方式一this.$emit(“function”,param)
子组件通过$emit传递一个函数和参数父组件通过传递过来的函数接收参数即传过来的值。
父子组件一般会触发交互行为(子组件传递过来的值放在生命周期函数里是传不过来的)所以可以通过父子的交互行为获取到子组件传递过来的数据。 父组件通过子组件自定义的函数进行绑定接收传递过来的数据。
templatedivh1父组件/h1span接收到子组件传递过来的值/spanspan{{getSonToParentValue}}/spanhrchild tansToParent tansToParent/child/div
/templatescriptimport Child from ./child;export default {name: parent,components: {Child},data () {return {getSonToParentValue:,}},mounted() {},methods:{tansToParent(val) {this.getSonToParentValue val;console.log(子组件传递过来的值,val)}}}
/script子组件通过this.emit(function,param)子组件通过emit(function,param) 子组件通过emit(function,param)子组件通过emit传递一个函数和参数父组件通过传递过来的函数接收参数即传过来的值。
templatedivh2子组件/h2button clicktoParentValue子组件按钮/buttonhrgrandson/grandson/div
/templatescriptimport Grandson from ./grandson;export default {name: child,components: {Grandson},data () {return {childValue:子组件传递给父组件的值,}},created() {},methods:{toParentValue(){//通过this.$emit给父组件传值this.$emit(tansToParent,this.childValue)}}}
/script效果图 方式二this.$child.xxx直接获取子组件数据且可直接修改子组件的数据。
父组件this.$children[0].childValue获取子组件数据只有一个子组件故下标为0.
templatedivh1父组件/h1span接收到子组件传递过来的值/spanspan{{getSonToParentValue}}/spanhrchild/child/div
/templatescriptimport Child from ./child;export default {name: parent,components: {Child},data () {return {getSonToParentValue:,}},mounted() {this.getSonToParentValue this.$children[0].childValue}}
/script子组件
templatedivh2子组件/h2button子组件按钮/buttonhrgrandson/grandson/div
/templatescriptimport Grandson from ./grandson;export default {name: child,components: {Grandson},data () {return {childValue:子组件传递给父组件的值,}},created() {},methods:{}}
/script方式三通过ref/refs获取子组件dom从而直接获取子组件数据。可直接修改子组件数据。
父组件
templatedivh1父组件/h1span接收到子组件传递过来的值/spanspan{{getSonToParentValue}}/spanhrchild refchildDom/child/div
/templatescriptimport Child from ./child;export default {name: parent,components: {Child},data () {return {getSonToParentValue:,}},mounted() {this.getSonToParentValue this.$refs.childDom.childValue}}
/script子组件与上述相同。
三、兄弟组件传值
方式一通过中转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();传值的兄弟组件
templatedivh2子组件/h2button clicktoBrother点击给兄弟组件传值/button/div
/templatescriptimport Grandson from ./grandson;import eventBus from ../utills/eventBus;export default {name: child,components: {Grandson},data () {return {transToBrother:这是传递给兄弟组件的值,}},methods:{toBrother(){eventBus.$emit(toBrotherFunc,this.transToBrother);}}}
/script接收值的兄弟组件
templatedivh3孙子组件/h3span兄弟组件传递过来的值/spanspan{{eventBusValue}}/span/div
/templatescriptimport eventBus from ../utills/eventBus;export default {name: grandson,data () {return {eventBusValue:,}},created() {eventBus.$on(toBrotherFunc,val{this.eventBusValue val;})}}
/script效果图
