vue父组件调用子组件的方法

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>