vue父组件中调用子组件的方法
Vue项目中如何在父组件中直接调用子组件的方法:
你先理清楚是做什么的,然后呢,你就要去弄明白怎么弄,然后之后学小知识就知道怎么用。学hashmap的时候也不知道怎么用,题目中知道。学数据结构和C语言就是做题目啊,和读读高中之前一样 啊。
方案一:通过ref直接调用子组件的方法;【基本使用第一个方法就能满足需求。】
//父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export default { methods: { handleClick() { this.$refs.child.sing(); }, }, } </script> //子组件中 <template> <div>我是子组件</div> </template> <script> export default { methods: { sing() { console.log('我是子组件的方法'); }, }, }; </script>
方案二:通过组件的$emit、$on方法;
//父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export default { methods: { handleClick() { this.$refs.child.$emit("childmethod") //子组件$on中的名字 }, }, } </script> //子组件中 <template> <div>我是子组件</div> </template> <script> export default { mounted() { this.$nextTick(function() { this.$on('childmethods', function() { console.log('我是子组件方法'); }); }); }, }; </script>
posted on 2022-06-08 15:57 xiaoluoke 阅读(18436) 评论(0) 编辑 收藏 举报