西瓜网络深圳网站建设 东莞网站建设什么推广方法是有效果的
一、注意点
专门强调了是3.0且是组合式，不是2.0不支持也不是选项式不支持provide&&inject，是支持但是有很明显的弊端，不建议使用
二、场景
官方的解释: 通常情况下，当我们需要从父组件向子组件传递数据时，会使用props，想象一下这样的结构，有一些多层级嵌套的组件，形成了一颗巨大的组件树，而某一个深层的子组件需要一个较远的祖先组件中的部分数据，在这种情况下，如果仅使用props则必须将其沿着组件链逐级传递下去，这会非常麻烦，provide(供给)和reject(注入)可以帮助我们解决这个问题。
简单来说: 后代组件，无论是多后代的组件，想使用祖先的数据，可以不用一级一级的传递数据，只需要在祖先组件使用provide以及需要使用这个数据的后代组件reject注入即可。
三、普通注入
先说一下组件结构: APP.vue-parentView.vue-childView.vue
(parentView.vue中的内容不在写出来，就是单纯的引入childView.vue组件)
APP.vue
import { ref, provide } from "vue"
imort ParentView from "./parentView.vue"
const message = ref("1111")
provide("message", message)
<input />
<ParentView />
childView.vue
import { inject } from "vue"
// 1、正常获取供给值
const meassageEnd = inject("message")
// 2、添加默认值，防止供给值不存在报警告
const messageEnd = inject("message", "2222")
// 3、添加默认值，防止供给值不存在报警告，通过函数或者初始值设定
const messageEnd = inject("message", ()=>{
return "0000"
}, true)
{{message}} // input的值更改的时候这里会同步响应
四、注入方组件中更改数据
APP.vue
import { ref, provide } from "vue"
import ParentView from "./parentView.vue"
const message = ref("1111")
const clickFun = () => {
message.value="new value"
}
provide("messageAccept", {
message,
clickFun
})
<input v-model="message" />
<ParentView>
childView.vue
import { inject } from "vue"
const { mssage, clickFun } = inject("messageAccept")
{{message}}
<div @click="clickFun"></div>