Vue父组件调用子组件方法----多种写法
一、父组件中引入子组件
- 父组件 parent.vue
<template>
<div>
<!-- 调用子组件,子组件的全部内容会显示在这个div中 -->
<Child/>
</div>
</template>
<script setup>
// import 子组件的相对路径
import Child from './child.vue'
</script>
- 子组件 child.vue
<template>
<div>我是子组件</div>
</template>
<script>
</script>
二、父组件中调用子组件的方法
1、export default 写法
- 父组件 parent.vue
<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>
- 子组件 child.vue
<template>
<div>我是子组件</div>
</template>
<script>
export default {
mounted() {
this.$nextTick(function() {
this.$on('childmethods', function() {
console.log('我是子组件方法');
});
});
},
};
</script>
2、父组件 setup 写法
- 父组件 parent.vue
<template>
<div>
<Button @click="handleClick">点击调用子组件方法</Button>
<Child ref="Child"/>
</div>
</template>
<script setup>
import Child from './child';
const Child = ref(null)
function handleClick(){
Child.value.printfunction();
}
</script>
- 子组件 child.vue
<template>
<div>我是子组件</div>
</template>
<script>
export default {
methods() {
printfunction(){
console.log('我是子组件方法');
}
},
};
</script>
3、子父组件都用 setup 写法
- 父组件 parent.vue
<template>
<div>
<Button @click="handleClick">点击调用子组件方法</Button>
<Child ref="Child"/>
</div>
</template>
<script setup>
import Child from './child';
const Child = ref(null)
function handleClick(){
Child.value.printfunction();
}
</script>
- 子组件 child.vue
<template>
<div>我是子组件</div>
</template>
<script setup>
function printfunction(){
console.log('我是子组件方法');
}
// 将子组件的方法暴露出去
defineExpose({
printfunction
})
</script>
作者:落花桂
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。