Vue3.0:如何在父组件中调用ref的子组件方法
在使用vue3.0的时候,需要去调取子组件的方法去快速的解决需求,类似于在Vue2.x中的this.$refs去操作虚拟dom元素的方法,但是在Vue3.0中是没有this指向的,那么解决办法就是先将ref的值定义一个对象,其value值再指向是子组件component。
//子页面 Child.vue <template> <div>子页面计数:{{ count }}</div> </template> <script> import { ref } from "vue"; export default { name: "Child", setup() { const count = ref(0); const add = () => { count.value++; }; const addCustom = (value) => { count.value += value; }; return { count, add, addCustom, }; }, }; </script> <style lang="scss" scoped> </style>
// 父页面 Index.vue <template> <div> <Child ref="child"></Child> <br /> 父页面按钮:<button @click="handleAdd">点击+1</button> <br /> 父页面按钮:<button @click="handleAddCustom">(添加自定义数值)点击+10</button> </div> </template> <script> import { ref } from "vue"; import Child from "./Child"; export default { name: "Parent", components: { Child, }, setup() { const child = ref(); const handleAdd = () => { child.value.add(); }; const handleAddCustom = () => { child.value.addCustom(10); }; return { child, handleAdd, handleAddCustom }; }, }; </script> <style lang="scss" scoped> </style>
上面展示的是我的代码实现,代码逻辑是我计数,但是当把这个组件以子组件的方式引进去的时候,我想直接通过调用子组件的方法去实现数字的累加。
![](https://img2020.cnblogs.com/blog/679260/202106/679260-20210604175244016-1154538691.png)
上图为界面。
转载链接:https://www.jianshu.com/p/846e1157b96b