一、父组件调用子组件方法
1、父组件可以通过ref属性来调用子组件的方法
父组件代码
<template>
<div class="parent">
<Child ref="child"></Child>
</div>
</template>
<script>
import Child from '@/Child'
export default {
components: {
Child
},
methods: {
parentMethod(){
this.$refs.child.childMethod();
}
}
}
</script>
子组件代码
<template>
<div class="child">
<button @click="childMethod">子组件</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
}
}
}
</script>
二、子组件调用父组件方法
1、使用this.$emit()向父组件触发一个事件,父组件监听事件
在父组件中给子组件添加一个自定义函数,把父组件中的方法传递进去。子组件通过ths.$emit来触发父组件函数
//父组件
<template>
<div>
<child @method="fatherMethod"></child>
</div>
</template>
<script>
import child from './child'
export default {
components: {
child
},
methods: {
fatherMethod(data) {
console.log(data+'调用父组件方法');
}
}
};
</script>
//子组件
<template>
<div>
<button @click="childMethod()">子组件按钮(点击调用父组件方法)</button>
</div>
</template>
<script>
export default {
methods: {
childMethod() {
this.$emit('fatherMethod','子组件数据');
//this.$emit('fatherMethod');没有参数直接调用
}
}
};
</script>
2、直接在子组件中通过“this.$parent.event”来调用父组件的方法
3、父组件把方法传入子组件中,在子组件里直接调用