方案一:通过ref直接调用子组件的方法;
父组件⬇
<Row>
<application ref="appli"></application>
</Row>
<Row>
<Button @click="commit_btn"> 点击调用子组件方法 </Button>
</Row>
-------------------------------分割线---------------------------------------
import application from './Application.vue'
//提交按钮点击事件,这里是调用子组件的方法
methods:{
commit_btn(){
this.$refs.appli.commitApply()
}
}
子组件⬇
commitApply(){
console.log('该方法被父组件调用')
}
方案二:通过组件的 e m i t 、 emit、 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>