vue2父组件调用子组件的方法.
方法1：通过$refs来进行调用。
子组件
<script>
export default {
data() {
return {
name: 'jack'
}
},
methods: {
childrenFuc() {
//在这里做某些子组件的操作。更菜子组件的值等等
this.name = 'Tom'
}
}
}
</script>
父组件
<template>
<childBody ref="childRef"></childBody>
<button @click="handleClick">点击按钮</button>
</template>
<script>
export default {
data() {
return {
name: 'jack'
}
},
methods: {
handleClick() {
//通过点击事件触发子组件的函数方法
this.$refs.childRef.childrenFuc();
}
}
}
</script>
方法2：使用 e m i t 和 emit和 emit和on的方法
在子组件的mounted或者created定义需要触发的函数
<script>
export default {
data() {
return {
name: 'jack'
}
},
mounted() {
//使用$nextTick方法，确保dom渲染完毕后加载该函数。
this.$nextTick(function () {
this.$on("childrenFuc", () => {
//在这里做某些子组件的操作。更菜子组件的值等等
this.name = 'Tom'
})
})
}
}
</script>
父组件
<template>
<childBody ref="childRef"></childBody>
<button @click="handleClick">点击按钮</button>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
handleClick() {
//触发子组件的方法。
this.$refs.childRef.$emit("childrenFuc");
}
},
}
</script>
Vue3父组件调用子组件的方法：
首先需要使用defineExpose把需要调用的方法暴露出来。
子组件：
<script>
import {
defineExpose, ref } from 'vue';
let state = 'jack';
const childFunction = () => {
console.log("子组件内容");
state = 'Tom';
}
defineExpose({
childFunction //把子组件的方法暴露一个出口
})
</script>
父组件调用
<template>
<childBody ref="childRef"></childBody>
<button @click="handleClick">点击按钮</button>
</template>
<script>
import {
ref, nextTick } from 'vue';
const childRef = ref(null); //首先把定义ref变量
const handleClick = () => {
//调用子组件暴露出来的方法
childRef.value.childFunction();
//当然为了保证数据加载的顺序，某些情况还是要使用nextTick的方法来进行包括，
//确保数据的正确性。
nextTick(() => {
childRef.value.childFunction();
})
}
</script>