网站开发语言格式化标记语言,网页设计实训报告总结与收获,网站建设什么打王思聪,电子商务网站建设所需要的经费一、情景说明
我们在之前#xff0c;学习了Vue3#xff1a;标签的ref属性用法 我们知道#xff0c;父组件中#xff0c;给子组件使用ref标记后#xff0c;获取到的是#xff0c;子组件实例。 那么#xff0c;我们就可以修改子组件实例暴露的变量值。
与之对应的是学习了Vue3标签的ref属性用法 我们知道父组件中给子组件使用ref标记后获取到的是子组件实例。 那么我们就可以修改子组件实例暴露的变量值。
与之对应的是子组件获取父组件的实例从而修改父组件的变量值。
所以这也可以理解为父子组件之间通信更准确的说是父子组件间修改数据。
父组件批量修改多个子组件数据$refs 子组件修改父组件数据$parent
二、案例
1、$refs用法
父组件 模板代码参数$refs button clickgetAllChild($refs)让所有孩子的书变多/buttonChild1 refc1/Child2 refc2/按钮对应的函数代码 这里就可以同时获取到c1和c2两个实例 function getAllChild(refs:{[key:string]:any}){console.log(refs)for (let key in refs){refs[key].book 3}}两个子组件 暴露变量这样父组件就可以操作该变量 // 把数据交给外部defineExpose({book})2、$parent用法
子组件 模板代码参数$parent
button clickminusHouse($parent)干掉父亲的一套房产/button按钮对应的函数代码 function minusHouse(parent:any){parent.house - 1}父组件 暴露变量 // 向外部提供数据defineExpose({house})大家可能会疑问父组件可以有多个子组件所以有对应的$refs 那么子组件也可以被多个父组件引用那是否存在$parents呢 明确的告诉你Vue3中没有$parents! 但是用另外一个办法实现了!
