1、依赖注入
有时,我们希望能跨父子组件通讯,比如,无论组件之间嵌套多少层级,我都希望在后代组件中能访问它们祖先组件的数据。
父组件
// 使用<script setup>
<script setup>
import { provide } from 'vue'
provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>
// 不使用<script setup>
import { provide } from 'vue'
export default {
setup() {
provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
}
}
-
除了在一个组件中提供依赖之外,还可以在整个引用层提供依赖(在main.js中使用,所有的vue组件都可以使用)
import { createApp } from 'vue'
const app = createApp({})
app.provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
-
如果某个后代组件需要provide提供的值,只需要通过inject(‘注入数据名’)即可
-
如果祖先没传入你要注入的值,我们可以设置默认值
const value = inject('message', '这是默认值')
//使用的话直接在template标签直接使用就好了
2、父组件使用子组件的数据
当我们直接想使用子组件的数据和方法时,需要在子组件使用defineExpose
//要使用这个语法,需要将 setup attribute 添加到 <script> 代码块上:
<script setup>
console.log('hello script setup')
//里面的代码会被编译成组件 setup() 函数的内容。这意味着与普通的 <script> 只在组件被首次引入的时候执行一次不同,<script setup> 中的代码会在每次组件实例被创建的时候执行。
</script>
当我们的组件使用这种语法时,是不可以用setup()这种语法的写法获取子组件的数据或方法
为了在 script setup 组件中明确要暴露出去的属性,使用 defineExpose 编译器宏:
<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
//当父组件通过模板 ref 的方式获取到当前组件的实例,获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)
</script>
3、父子间通讯,父传子,子传父
// 父组件
<script setup>
import { ref,onMounted } from 'vue'
import childrenTest_oneVue from "./conponents/childrenTest_one.vue";
const childrenOne = ref(null)
onMounted(()=>{
childrenOne.value.childMethod()
})
</script>
<template>
<childrenTest_oneVue ref="childrenOne"/>
</template>
//----------------------分界线-----------------------
//子组件
<script setup>
const childStr = '我在子组件定义'
const childMethod = () => {
console.log('我是在子组件定义的方法')
}
defineExpose({
childStr,
childMethod
})
</script>