1. ref
直接在父组件内部给子组件标签添加ref属性，然后通过ref属性来调用子组件的方法。
父组件
// Parent.vue
<template>
<div>
<button @click="handleClick">按钮</button>
<Child ref="child"></Child>
</div>
</template>
<script>
import Child from './components/child.vue'
export default {
name: "Father",
components: {
Child,
},
methods: {
handleClick() {
this.$refs.child.sing()
},
},
}
</script>
<style scoped lang="scss">
</style>
子组件
// Child.vue
<template>
<div>
<p>我是子组件</p>
</div>
</template>
<script>
export default {
name: "Child",
methods: {
sing() {
console.log('使用refs直接调用子组件方法')
},
},
}
</script>
<style scoped lang="scss">
</style>
2. $children
在父组件的方法中，通过 $children 属性来访问子组件实例，并调用子组件的方法，返回的是一个存放所有子组件的数组。
父组件
// Parent.vue
<template>
<div>
<button @click="handleClick">点击我调用子组件方法</button>
<Child ref="child"></Child>
</div>
</template>
<script>
export default {
methods: {
callChildMethod() {
const childComponent = this.$children[0];
childComponent.childMethod();
}
}
}
</script>
<style scoped lang="scss">
</style>
子组件
// Child.vue
<template>
<div>
<p>我是子组件</p>
</div>
</template>
<script>
export default {
name: "Child",
methods: {
childMethod() {
console.log('使用$children直接调用子组件方法')
},
},
}
</script>
<style scoped lang="scss">
</style>
3. $emit $on
父组件
// Parent.vue
<template>
<div>
<button @click="handleClick">点击我调用子组件方法</button>
<Child ref="child"></Child>
</div>
</template>
<script>
import Child from './components/child.vue'
export default {
components: {
Child,
},
methods: {
handleClick() {
this.$refs.child.$emit("sing") //子组件里$on中的名字
},
},
}
</script>
<style scoped lang="scss">
</style>
子组件
// Child.vue
<template>
<div>
<p>我是子组件</p>
</div>
</template>
<script>
export default {
mounted() {
this.$nextTick(function () {
this.$on('sing', function () {
console.log('$emit配合$on实现调用子组件方法')
})
})
},
}
</script>
<style scoped lang="scss">
</style>
