1.父组件操作子组件:
defineProps:子组件接收父组件传参(使用场景:父组件向子组件传参)
// 父组件
<template>
<Child :name="name"></Child>
</template>
//子组件
const props = defineProps({
name: {
type: String,
default: ""
}
});
defineEmits:子组件向父组件暴露事件(使用场景:父组件要调用子组件的方法)
// 父组件
<template>
<Child @getdata="getdata"></Child>
</template>
<script>
const getdata = (e: string) => {
console.log(e);
};
</script>
//子组件
import { defineEmits } from "vue"
<template>
<button @click="handleClick">暴露</button>
</template>
<script>
const emits = defineEmits(["getdata"]);
const handleClick = () => {
emits("getdata", "子组件向父组件传递数据");
};
</script>
defineExpose:父组件获取子组件的数据和方法(使用场景:父组件要调用子组件的数据或方法)
// 父组件
<template>
<Child ref="childExpose"></Child>
<button @click="handelcount">子组件暴露</button>
</template>
<script>
// 拿到子组件实例
const childExpose = ref();
const handelcount = () => {
//获取子组件的数据或方法
console.log(childExpose.value.count);
};
</script>
// 子组件
<script>
//子组件将数据或方法暴露出去
defineExpose({
count: 1
})
</script>
2.子组件操作父组件:
provide :父组件提供给子组件的数据或方法
<script setup>
import { provide } from 'vue'
//提供
provide("getList",getList)
function getList() {
console.log(123456)
}
</script>
<template>
<child/>
</template>
inject:子组件获取父组件提供的数据或方法
<script setup>
import { reactive, inject } from 'vue'
//获取
const getList = inject('getList')
//调用
getList()
</script>
<template>
</template>