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