2#xff09;原理如下#xff1a;

属性说明$refs值为对象#xff0c;包含所有被ref属性标识的DOM元素或组件实例。

$parent值为对象#x…1、$refs与$parent

1概述

属性说明$refs值为对象包含所有被ref属性标识的DOM元素或组件实例。

$parent值为对象当前组件的父组件实例对象

$refs

classfa***rh3父组件/h3h4房产{{house}}/h4button

clickchangeToy修改Child1的玩具/buttonbutton

clickchangeComputer修改Child2的电脑/buttonbutton

clickgetAllChild($refs)获取所有子组件的实例对象/buttonChild1

refc1/Child2

changeToy(){console.log(c1.value)c1.value.toy

小猪佩奇}function

changeComputer(){c1.value.computer

华为}function

getAllChild([refs:any}){for(let

key

refs){console.log(refs[key])refs[key]3}}//

向外部提供数据defineExpose({house})/script

templatediv

classchild1h3子组件1/h3h4玩具:{{toy}}

个/h4h4书籍:{{book}}

clickminusHouse($parent)干掉父亲的一套房产/button/div

/templatescript

minusHouse(parent:any){console.log(parent)parent.house

1}//

把数据交给外部defineExpose({toy,book})/script

templatediv

classchild2h3子组件2/h3h4电脑{{computer}}/h4h4书籍{{book}}

本/h4/div

把数据交给外部defineExpose({computer,book})

/script

classfa***rh3父组件2/h3h4银子:{{money}}万元/h4h4车子:一辆{{car.brand}}车,价值{{car.price}}万元/h4Child//div

/templatescript

reactive({brand:奔驰,price:100})function

value}//

向后代提供数据provide(qian,{money,updateMoney})provide(che,car)

/script

classgrand-childh3我是孙组件/h3h4银子{{x}}/h4h4车子:一辆{{car.brand}}车,价值{{car.price}}万元/h4button

clickupdateMoney(6)花爷爷的钱/button/div

/templatescript

inject(qian,{money:0,updateMoney:(x:number){}})let

car