父组件代码:
<template>
<div class="parent">
<div class="parent-wrapper">
<button @click="parentMethod">我是父组件的按钮,但是我可以调用子组件的方法</button>
</div>
<Child ref="child"></Child>
</div>
</template>
<script>
import Child from '@/components/test/Child'
export default {
name: 'parent',
data () {
return {
}
},
components: {
Child
},
methods: {
parentMethod(){
this.$refs.child.childMethod();
}
}
}
</script>
<style scoped>
.parent-wrapper {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 50px;
}
</style>
子组件代码:
<template>
<div class="child">
<div class="child-wrapper">
<button @click="childMethod">这是子组件的按钮</button>
</div>
</div>
</template>
<script>
export default {
name: 'child',
data () {
return {
}
},
methods: {
childMethod() {
alert("我是子组件的方法!")
}
}
}
</script>
<style scoped>
.child-wrapper {
width: 300px;
height: 300px;
border: 1px solid blue;
margin: 50px;
}
</style>
代码解析:
1、最重要的部分是在父组件调用子组件的标签上,定义了一个ref属性:child,通过这个属性,可以获取到子组件里面的的属性和方法。
2、在父组件的方法 parentMethod 执行的时候,使用:this.$refs.child.childMethod(); 来调用子组件的方法。
点击父组件按钮后: