一个空间建多个网站的方法,微信营销的成功案例,东莞金融网站建设,成都网站推广营销微信ref 的使用
vue3中#xff0c; 在 组件中添加一个 component ref“xxx” #xff0c;就可以在父组件中得到 子组件的 dom 对象#xff0c; 以及 虚拟的 dom 对象#xff0c; 有了虚拟 dom, 我们就可以在父组件中控制子组件的显示了
ref 的使用方法 vue3中ref 的特点
以上…ref 的使用
vue3中 在 组件中添加一个 component ref“xxx” 就可以在父组件中得到 子组件的 dom 对象 以及 虚拟的 dom 对象 有了虚拟 dom, 我们就可以在父组件中控制子组件的显示了
ref 的使用方法 vue3中ref 的特点
以上如果在vue2中就可以使用 子组件的对象来改变子组件的数据 和调用子组件的方法了 但是在vue3 这样做还是不行的 还要做一步操作才可以也就是要在子组件中 把父组件想用的方法或属性暴露出去才可以
以上是父组件通过 ref 来得到子组件的对象 进而控制子组件中的 属性和方法 那么我们通过子组件 如何去控制父组件的属性和方法呢。那就不止一种方法了 emit mitt(bus) 都是可以了 这里要说的是 和 ref 相类似的 $parent 方法 $parent 可以添加在子组件中的事件参数上 参数名称必须是 $parent这样在事件的回调方法中就可以得到父组件的对象 并控制其中的属性和方法了。 同样的道里 我们要在父组件中 把要使用的方法或属性暴露出来才可以使用 下面给出一个样例 父组件中的按钮可以改变子组件中的属性 并且子组件中的按钮可以改变父组件中的
父组件
templatediv classbaba我是父组件 我的资产是 {{money}}button clickborrow100点击我从儿子那里拿1000元/buttonhr/erzi refson/erzi //变量中定义一个和 ref 同名的就可以得到子组件的对象/div
/templatescript setupimport {ref} from vue;import erzi from /views/Home/erzi.vue;let money ref(100000000);let son ref() //通过 ref 获取到子组件的对象const borrow100 (){ //这里点击了父组件的按钮 去改变子组件的 money 属性money.value1000;son.value.money - 1000;}defineExpose({money}) //这里是通过暴露父组件的 money 属性 给子组件来使用
/script
子组件
templatediv classerzi我是子组件 我的资产是 {{ money }}button clickyao20($parent)点击我们父亲那里拿 20 元/button//这里子组件的事件使用的 $parent 来做参数必须使用 $parent 才可以得到父组件的对象/div
/templatescript setupimport {ref} from vue;let money ref(88888888);const yao20 (p){ //这是子组件中的事件 触发更改父组件的属性//根据传参可以知道 p 就是父组件的对象money.value 20;p.money -20;}defineExpose({ //这里是暴露 子组件的 money属性 因为父组件需要使用//如果需要的话 这里也可以暴露方法money})
/script
