Vue에서 제공 및 주입 사용에 대해 설명하는 기사

Vue에서 어떻게 제공과 주입을 사용하나요? 다음 글에서는 Vue에서 Provide와 Inject를 사용하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다!

vue2.0에서 provide 및 inject는 선택 사항입니다(구성) API 메서드는 다음과 같습니다. 구성 요소 간(조부모 및 손자) 통신 문제를 해결하기 위해 구성 요소에 사용됩니다. 부모 구성 요소는 사용자 정의 속성을 통해 나열되고 하위 구성 요소는 props를 통해 나열됩니다. 이런 방식으로 수신하여 레이어별로 전송하려는 경우 이 방법은 더 번거롭고 유연성이 없습니다vue2.0里面provide与inject是以选项式(配置)API的方式在组件中进行使用的，解决的是跨组件(祖孙)间通信的一种方式

也就是父子组件间的通信,父组件上市通过自定义属性，而子组件间通过props这种方式接收，如果想要一层一层的传递，这种方式就会比较麻烦，不灵活

provide与inject就是解决：怎么从祖组件的数据，传递到孙组件，实现跨级组件传递数据的

在vue3.0里面，同样提供了provide与inject，使用起来更简单方便，单纯的从概念上去看，是比较抽象，难以理解的。【相关推荐：vuejs视频教程、web前端开发】

还是要从具体的实例出发

provide()函数

定义：提供一个值，可以被后代组件注入

实现： 父组件有一个provide,选项来提供数据，后代组件中有一个inject选项来开始使用父组件传递过来的数据

provide(第一个参数,第二个参数)，接收两个参数,第一个参数是要注入的key，它可以是一个字符串或一个symbol，第二个参数是要注入的值(具体要传递给子孙组件的数据)

provide是vue官方提供的componsition API

具体示例代码如下所示

import {reactive,provide} from "vue";

let person = reactive({name: 'itclanCoder',website: 'https://coder.itclan.cn'});
provide('person',person);

通过上面的provide提供一个值,就可以了的，那怎么样把这个数据传递到子孙组件，那么就需要用到inject了的

inject()函数

定义: 注入一个由祖先(父)组件或整个应用提供的值

实现: 接收父(祖)组件传递过来的值

inject(第一个参数,第二个参数(可选)):第一个参数是注入的key,来自父(祖)组件,它们两者是需要保持一致的

Vue会遍历父组件链,通过匹配key来确定所提供的值,如果父组件链上多个组件对同一个key提供了之,那么离得更近的将会覆盖链上更远的组件所提供的值

如果没有能通过key匹配到的值,inject()函数将返回undefined,除非提供一个默认值

第二个参数是可选的,即没有匹配到key时,使用默认值,它也可以是一个函数,用来返回某些创建起来比较复杂的值,如果默认值本身就是一个函数

那么必须将false作为第三个参数传入,表明这个函数就是默认值,而不是一个工厂函数

与注册生命周期钩子的API类似,inject()必须在组件的setup()阶段同步调用

具体示例代码

import {inject,toRefs} from  "vue";

const person = inject('person');
// 若是使用解构,则会丢失响应式,修改数据时,页面不会更新,具体解决,可以引入toRef或toRefs函数
const {name,website} = toRefs(person);

在孙组件中的模板即可以读取,从父组件传递过来的数据也是支持响应式的

{{person.name}}---{{person.website}}

若使用解构时,则模板中可直接使用变量

{{name}}--{{website}}

若使用解构时,则模板中可直接使用变量

{{name}}--{{website}}

注意

如果是解构变量,想要数据响应式,那么需要使用toRef()或toRefs()将数据进行转化为响应式

如下是完整的示例

import { inject } from 'vue'
import { fooSymbol } from './injectionSymbols'

// 注入值的默认方式
const foo = inject('foo') 

// 注入响应式的值
const count = inject('count')

// 通过 Symbol 类型的 key 注入
const foo2 = inject(fooSymbol)

// 注入一个值，若为空则使用提供的默认值
const bar = inject('foo', 'default value')

// 注入一个值，若为空则使用提供的工厂函数
const baz = inject('foo', () => new Map())

// 注入时为了表明提供的默认值是个函数，需要传入第三个参数
const fn = inject('function', () => {}, false)

基本上用第一种注入默认值的方式,使用是最多的,接收父组件提供传递过来的值

总结

provide()与inject()

제공 및 주입이 해결책입니다. 크로스 레벨 컴포넌트 전송을 실현하기 위해 조상 컴포넌트에서 손자 컴포넌트로 데이터를 전달하는 방법

vue3.0에서는 provide 및 도 제공됩니다. 는 순전히 개념적인 관점에서 보면 상대적으로 추상적이고 이해하기 어렵습니다. [관련 권장사항: vuejs 비디오 튜토리얼

, 웹 프론트엔드 개발]아직 구체적인 예부터 시작해야 합니다

provide() 함수

정의: 하위 구성 요소에 의해 주입될 수 있는 값을 제공합니다🎜🎜구현: 상위 구성 요소에는 데이터를 제공하는 provide 옵션이 있습니다. 하위 구성 요소에는 상위 구성 요소에서 전달된 데이터를 사용하기 시작하는 inject 옵션이 있습니다.🎜🎜 제공(첫 번째 매개변수, 두 개의 매개변수), 두 개의 매개변수를 수신합니다. 첫 번째 매개변수는 삽입할 키이며 문자열 또는 기호일 수 있습니다. >, 두 번째 매개변수 각 매개변수는 주입될 값(자손 컴포넌트에 전달할 특정 데이터)입니다🎜🎜provide는 에서 공식적으로 제공하는 <code>컴포넌트 API입니다. vue🎜🎜 구체적인 샘플 코드는 다음과 같습니다 🎜rrreee🎜 위의 provide를 통해 값을 제공하면 충분합니다. 이 데이터를 하위 컴포넌트에 전달하는 방법은 다음과 같습니다. inject의 🎜

inject() 함수

🎜정의: 주입 조상(부모) 컴포넌트 또는 전체 애플리케이션에서 제공하는 값🎜🎜구현: 부모(조상) 컴포넌트가 전달한 값을 받습니다🎜🎜inject(첫 번째 매개변수, 두 번째 매개변수(선택 사항) )): 첫 번째 매개변수는 삽입된 <code>key이며 상위(상위) 구성요소에서 가져옵니다. 두 매개변수는 일관성이 있어야 합니다🎜🎜Vue. 상위 구성 요소 체인을 탐색하고 키를 일치시켜 제공된 값을 결정합니다. 상위 구성 요소 체인의 여러 구성 요소가 동일한 key를 제공하는 경우 더 가까운 구성 요소가 체인에 있는 구성 요소를 덮어씁니다. 제공된 값🎜🎜key와 일치할 수 있는 값이 없으면 inject() 함수는 기본값이 아닌 이상 undefine을 반환합니다. 제공됨🎜 🎜두 번째 매개변수는 선택사항입니다. 즉, key와 일치하는 항목이 없으면 기본값이 사용됩니다. 더 복잡한 일부 값을 반환하는 함수일 수도 있습니다. 기본값이 함수 자체라면 🎜🎜 그러면 세 번째 매개변수로 false를 전달해야 합니다. 이는 이 함수가 팩토리 함수가 아닌 기본값임을 나타내며 🎜🎜 >라이프 사이클 후크 등록을 위한 API마찬가지로 inject()는 컴포넌트의 setup() 단계에서 동기적으로 호출되어야 합니다🎜🎜특정 예제 코드🎜rrreee 🎜손주 컴포넌트의 템플릿을 읽을 수 있으며 상위 컴포넌트에서 전달된 데이터도 응답성을 지원합니다🎜rrreee🎜구조 분해를 사용하면 템플릿에서 변수를 직접 사용할 수 있습니다🎜rrreee🎜구조 분해를 사용하면 변수를 직접 사용할 수 있습니다 템플릿🎜rrreee🎜참고 🎜🎜변수를 분해하고 데이터가 반응하도록 하려면 toRef() 또는 toRefs()를 사용해야 합니다. 를 사용하여 데이터를 반응형 스타일로 변환🎜🎜 다음은 완전한 예입니다🎜rrreee🎜기본적으로 가장 많이 사용되는 기본값을 주입하는 첫 번째 방법을 사용하고 상위 컴포넌트에서 전달된 값을 받습니다🎜요약 🎜provide() 및 inject()는 비교적 사용이 간단합니다. 이는 구성 요소 간 통신을 해결하는 방법입니다. 계층적 중첩의 경우 하위 구성 요소가 상위 구성 요소의 데이터를 사용하려는 경우 이 방법을 사용하여 데이터를 전송할 수 있습니다. 일상적인 업무 전개, 면접에서도 자주 나오는 질문, 크로스 레벨 컴포넌트 해결 방법, 부모-자식 컴포넌트 커뮤니케이션🎜🎜 (학습 영상 공유: 🎜vuejs 입문 튜토리얼🎜, 🎜Basic) 프로그래밍 영상🎜)🎜

위 내용은 Vue에서 제공 및 주입 사용에 대해 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!