一:通过ref直接调用子组件的方法;
子组件child.vue
<template> <div>我是子组件</div> </template> <script> export default { methods: { childFun() { console.log('我是子组件的方法'); }, }, }; </script>
父组件:
<template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export default { methods: { handleClick() { this.$refs.child.childFun(); }, }, } </script>
二:通过组件的e m i t 、 emit、emit、on方法;
子组件child.vue:
<template> <div>我是子组件</div> </template> <script> export default { mounted() { this.$nextTick(function() { this.$on('childFun', function() { console.log('我是子组件方法'); }); }); }, }; </script>
父组件:
<template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export default { methods: { handleClick() { this.$refs.child.$emit("childFun") //子组件$on中的名字 }, }, } </script>
vue调用孙子组件的方法:
父组件
<template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Child from './child'; export default { components: { Child }, methods: { handleClick() { this.$refs.child.$refs.grandson.test() }, }, } </script>
子组件
<template> <div>我是子组件</div> <grandson ref='grandson'></grandson> </template> <script> import grandson from './grandson'; export default { components: { grandson }, methods: { childFun() { console.log('我是子组件的方法'); }, }, }; </script>
孙子组件
<template> <div></div> </template> <script> export default { name: "index", methods:{ test(){ console.log('孙子组件的方法') } } } </script>
————————————————
原文链接:https://blog.csdn.net/Jonn1124/article/details/117478603