1.通过ref直接调用子组件的方法;
2.通过组件的$emit、$on方法;
方案一:通过ref直接调用子组件的方法;
访问子组件实例或子元素
尽管存在 prop 和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的,你可以通过 ref
这个 attribute 为子组件赋予一个 ID 引用。例如:
<base-input ref="usernameInput"></base-input>
现在在你已经定义了这个 ref
的组件里,你可以使用:
this.$refs.usernameInput
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | //父组件中 <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方法;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | //父组件中 <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> |