defineProps 、 defineEmits、defineExpose 都是只在 setup语法糖 中才能使用的编译器宏。他们不需要导入是直接可用的
一、Props父 >> 子组件传递,使用defineProps
// Parent.vue
<tempalte>
<Child :data="toChild" />
</template>
<script setup>
const toChild = reactive({
msg: 'hello composition'
})
</script>
// Child.vue
<script setup>
const props = defineProps({
data: {
msg: String
}
})
</script>
二、Emit子 >> 父组件传递,使用defineEmits
// Parent.vue
<tempalte>
<Child @toParent="emitChange" />
</template>
<script setup>
const emitChange = (data) => {console.log(data)}
</script>
// Child.vue
<tempalte>
<button @click="pushMsg">发送</button>
</template>
<script setup>
const emits = defineEmits(['toParent'])
const pushMsg = () => {
emits('toParent', '来自child的问候')
}
</script>
三、defineExpose
使用setup语法糖,组件是默认关闭的,父组件无法通过ref和$parent获取到组件的组件的公开实例,为了在setup语法糖下明确要暴露出去的属性,使用defineExpose编译器宏
// Parent.vue
<tempalte>
<Child ref="getChild" />
</template>
<script setup>
import {ref, onMounted} from 'vue'
const getChild = ref(null)
onMounted(() => {
gteChild.value.helloParent()
})
</script>
// Child.vue
<script setup>
const helloParent = () => {
console.log('child')
}
defineExpose({helloParent})
</script>
四、Provide/Inject
// Parent.vue
<script setup>
import {reactive, provide} from 'vue'
const content = reactive({
msg: '来自祖辈的轻抚'
})
provide('fromParent', content)
</script>
// 子组件或孙组件
<script setup>
import {inject} from 'vue'
const content = inject('fromParent')
</script>
五、异步组件
异步组件下父组件无法通过ref获取子组件实例,(T-T),困扰许久
// Parent.vue
<tempalte>
<Child />
<Child2 />
</template>
<script setup>
import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'
// 不带选项的异步组件
const Child = defineAsyncComponent(() => import('./Child.vue'))
// 带选项的异步组件
const Child2 = defineAsyncComponent({
loader: () => import('./Child2.vue'), // 需要加载的组件
delay: 200, // 展示加载时组件的延时时间。默认值是 200 (毫秒)
timeout: 3000, // 超时时间,如果提供了超时时间且组件加载也超时了,则使用失败组件
errorComponent: ErrorComponent, // 加载失败时使用的组件
loadingComponent: LoadingComponent // 异步组件加载时使用的组件
})
</script>
六、useSlots和useAttrs
<script setup>
import { useSlots, useAttrs } from 'vue'
const slots = useSlots()
const attrs = useAttrs()
</script>