Vue2.x 父子组件之间的相互访问

儿子对爹说:“爹!你的车今天我开了”

  • 父访问子用$children
  • 子访问父用$parent
  • 父访问子更推荐用$refs
  • 因为$children是带下标值的,所以一旦这个结构发生变化,没办法动态的更改下标值,不推荐使用这个方法

父访问子

  • 先创建父子关系
<div id="father">
	<h1>{{name}}</h1>
	<button>我要调用我的儿子的方法</button>
	<son></son>
</div>

<template id="son">
	<div>
		<h2>{{name}}</h2>
		<h2>{{message}}</h2>
	</div>
</template>
const son = {
  template:'#son',
  data() {
    return {
      name:'我是儿子',
      message:''
    }
  },
  methods:{
    showMessage() {
      console.log('我被我爹调用了')
      this.message = '我被我爹调用了'
    }
  }
}
		
const father = new Vue({
  el:'#father',
  data:{
    name:'我是爹'
  },
  components:{
	son
  }
})

看一下页面效果
点击按钮,会调用儿子上的showMessage方法
在这里插入图片描述

  • 给儿子标签打上印记
  • 给按钮绑定事件
  • ref和$refs是一对儿,ref用来给标签打上标记
<div id="father">
	<h1>{{name}}</h1>
	<button @click="btnClick">我要调用我的儿子的方法</button>
	<son ref='son'></son>
</div>
  • $refs.son用来选中那个被打上son印记的标签
  • 更准确的来说是那一个组件(vueComponent实例)
const father = new Vue({
    //。。。
	methods:{
		btnClick() {
			console.log(this.$refs.son)
			this.$refs.son.showMessage()
		}
	},
})

看一下页面效果
在这里插入图片描述

子访问父

  • $parent
  • $root访问祖宗
  • 实际开发不建议这样使用,因为这样做,子组件就不够独立了,换个地方这个子组件的爹就不一样了,有可能没有目标属性
  • 组件化开发本身就是提高复用性,和父组件之间的耦合度太高了

给爹添加一个供儿子使用的数据

const father = new Vue({
	el:'#father',
	data:{
		name:'我是爹',
		fatherMes:'我将给我儿子'
	},
	//。。。。
})

给儿子添加一个按钮点击调用爹的数据

<template id="son">
	<div>
		<h2>{{name}}</h2>
		<h2>{{message}}</h2>
		<button @click="callFather">调用我爹地数据</button>
	</div>
</template>

添加事件

const son = {
// 。。。。
	methods:{
	//。。。。
		callFather() {
			console.log(this.$parent)
			console.log(this.$parent.fatherMes);
		}
	}
}

查看页面效果
在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值