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

一：通过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>