关于javascript: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>