Vue에서 제공 및 주입은 무엇이며 어떻게 사용하나요?

Vue.js는 현재 프런트엔드 세계에서 매우 인기 있는 JavaScript 프레임워크입니다. 여기에는 반응형 데이터 바인딩, 구성 요소화된 뷰 아키텍처, 종속성 추적 및 템플릿 렌더링과 같은 뛰어난 기능이 많이 있습니다. 가장 일반적으로 사용되는 기능은 컴포넌트 프로그래밍입니다. Vue는 컴포넌트 등록, 컴포넌트 매개변수 전달 등과 같은 기능 테스트를 제공합니다. 그러나 어떤 경우에는 컴포넌트 데이터 전송에 더 어려운 문제가 발생할 수 있습니다. 이러한 유형의 문제를 해결하기 위해 Vue에서 제공하는 provider 및 inject를 사용하세요. provide 和 inject 解决这类问题。

理解 provide & inject

provide

Vue2.2.0 版本新增了 provide / inject ， 其能够更好的帮助我们完成面向对象编程的需求。通俗的讲 provide 就是我们可以在父组件中提供数据，然后再子组件中使用 inject 来获取所需要的数据的一个过程。

提供一个例子来更好的理解 provide ：

<template>
  <!-- 父组件 -->
  <div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from './child-component';
  export default {
    provide: {
      foo: 'bar'
    },
    components: {
      childComponent
    }
  }
</script>

在父组件中，我们向下提供了一个键为 foo 的数据给到子组件中。随后在子组件中我们我可以通过 inject 来获取这份数据。

<template>
  <!-- 子组件 -->
  <div>
    <p>我是子组件，我获取到了一个名为"foo"的属性的值：{{foo}}</p>
  </div>
</template>
<script>
  export default {
    inject: ['foo']
  }
</script>

到这里，我们就实现了提供和注入的完整过程。通过 provide 我们在父组件中提供数据，随后再子组件中使用 inject 来获取数据，从而完成了组件之间的数据传递。

inject

inject 是一个数组，列表中声明要注入的属性名。在子组件注入一个对象，该对象的属性名与提供的键名相同，值为提供的数据。

提供一个具体的事例来理解 inject ：

<!-- 祖先组件: -->
<template>
  <div>
    <div>我是祖先组件</div>
    <slot></slot>
  </div>
</template>
<script>
  export default {
    provide() {
      return { name: 'Colin' }
    }
  }
</script>

<!-- 父组件 -->
<template>
  <div>
    <div>我是父组件</div>
    <child-component />
  </div>
</template>
<script>
  import childComponent from 'view/child-component.vue';
  export default {
    components: {
      childComponent
    }
  }
</script>

<!-- 子组件: -->
<template>
  <div>
    <div>我是子组件</div>
    <p>祖先组件中给我的数据是什么呢？ {{ name }}</p>
  </div>
</template>
<script>
  export default {
    inject: ['name']
  }
</script>

以上代码中，provide 函数可以理解为父组件向下层子组件提供数据，子组件再通过 inject 来接收这份数据，实现了数据的传输过程。

使用场景

此时，你可能会问：我们已经有了 props 父子组件之间的通信了，为什么还需要 provide/inject 呢？

其实，这两者在使用场景上是不太相同的。以下是一些可使用 provide/inject 实现父子组件通信的一些场景：

1. 跨级组件间的通信

在 Vue 中，父子组件之间的通信可以通过 props 实现，但是当跨级组件时，使用 props 传递数据将会变得非常繁琐。而此时可以通过 provide / inject 方式，在祖先组件中提供数据，然后在子孙组件中通过 inject 获取所需数据。

2. 父组件不清楚具体的子组件实现

在某些情况下，父组件并不清楚子组件内部的数据具体存放在哪个 props 中，而此时可以通过 provide 的方式将数据传递到子组件中。

3. 可以用一个观察者来观察值的变化，帮助组件集成的实现

通过 provide / inject 方式，我们可以将数据提供给子孙组件，给父级留下观察的入口，从而实现组件集成。

4. 不适合使用 props 时

在 Vue 中，props 是唯一一种官方的、比较好用的、用于父子之间传递数据的方式。但是在某些情况下，如多个子组件希望使用相同的全局变量、提供的公共方法的情况下，就可以使用 provide / inject 方式。

总结

通过本文的介绍，我们了解到了 Vue 中提供的 provide / inject 的基本用法，以及它们的使用场景。

在使用 provide / inject 的过程中，我们需要注意三点：

1. provide / inject 主要用于高阶插件开发，对于开发普通组件的程序员是不需要掌握的。
2. provide 选项应该是一个对象或返回一个对象的函数。这个对象包含可注入其它组件的属性。
3. provide / inject 主要解决的问题是跨层级组件之间的信息传递，常用于插件开发。

最后，当我们遇到跨级组件通信等问题时，就可以使用 provide / inject

제공 및 삽입 이해

제공

Vue2.2.0 버전에는 제공/주입이 추가되어 객체 지향 프로그래밍 요구 사항을 완료하는 데 더 도움이 될 수 있습니다. 일반인의 관점에서 provide는 상위 구성 요소에 데이터를 제공한 다음 하위 구성 요소에 inject를 사용하여 필요한 데이터를 얻을 수 있는 프로세스입니다. 🎜🎜provide를 더 잘 이해하기 위한 예를 제공하세요. 🎜rrreee🎜상위 구성 요소에서는 foo 키가 있는 데이터를 하위 구성 요소에 제공합니다. 그런 다음 하위 구성 요소에서 inject를 통해 이 데이터를 가져올 수 있습니다. 🎜rrreee🎜이 시점에서 우리는 제공과 주입의 전체 프로세스를 구현했습니다. provide를 통해 부모 컴포넌트에 데이터를 제공하고, 자식 컴포넌트에 inject를 사용하여 데이터를 얻어 컴포넌트 간 데이터 전송을 완료합니다. 🎜

inject

🎜inject는 배열이고, 목록에는 주입할 속성 이름이 선언되어 있습니다. 하위 구성 요소에 개체를 삽입합니다. 개체의 속성 이름은 제공된 키 이름과 동일하며 해당 값은 제공된 데이터입니다. 🎜🎜inject를 이해하기 위한 구체적인 예를 제공하세요. 🎜rrreee🎜위 코드에서 provide 함수는 하위 수준 자식에게 데이터를 제공하는 상위 구성 요소로 이해될 수 있습니다. 그런 다음 하위 구성 요소는 inject를 전달하여 이 데이터를 수신하고 데이터 전송 프로세스를 구현합니다. 🎜

사용 시나리오

🎜이 시점에서 다음과 같이 질문할 수 있습니다. 이미 상위 구성 요소와 하위 구성 요소 간에 props 통신이 있는데 provide/inject가 필요한 이유는 무엇입니까? 🎜🎜실제로 둘은 사용 시나리오에서 상당히 다릅니다. 다음은 provide/inject를 사용하여 상위-하위 구성 요소 통신을 구현할 수 있는 몇 가지 시나리오입니다. 🎜

1. 교차 수준 구성 요소 간 통신

🎜In Vue, 컴포넌트 간의 부모-자식 통신은 props를 통해 이루어질 수 있지만, 크로스 레벨 컴포넌트를 사용하는 경우 props를 사용하여 데이터를 전달하는 것은 매우 번거롭습니다. 이때 provide/inject를 통해 조상 컴포넌트에 데이터를 제공한 후, 자손 컴포넌트에 인젝션을 통해 필요한 데이터를 얻을 수 있습니다. 🎜

2. 상위 구성 요소는 하위 구성 요소의 구체적인 구현을 알지 못합니다.

🎜경우에 따라 상위 구성 요소는 하위 구성 요소 내부의 데이터가 어디에 있는지 모릅니다. props가 저장되며, 이때 provide를 통해 하위 컴포넌트에 데이터를 전달할 수 있습니다. 🎜

3. 관찰자를 사용하여 값의 변화를 관찰하여 구성요소 통합 구현에 도움을 줄 수 있습니다.

🎜제공/주입을 통해 방법을 사용하면 하위 구성 요소에 데이터를 제공하고 구성 요소 통합을 달성하기 위해 상위 구성 요소에 대한 관찰 진입점을 남길 수 있습니다. 🎜

4. props가 적합하지 않은 경우

🎜Vue에서 props는 부모와 자식 사이를 전달하는 유일한 공식적이고 사용하기 쉬운 방법입니다. 데이터. 그러나 여러 하위 구성 요소가 동일한 전역 변수와 제공된 공개 메서드를 사용하려는 경우와 같은 일부 경우에는 provide / inject 메서드를 사용할 수 있습니다. 🎜

요약

🎜 이번 글의 서문을 통해 Vue에서 제공하는 provide/inject의 기본 사용법과 사용 시나리오에 대해 알아보았습니다. 🎜🎜provide / inject를 사용하는 과정에서 세 가지 점에 주의해야 합니다. 🎜

1. provide / inject는 주로 높은 일반 컴포넌트를 개발하는 프로그래머는 이를 마스터할 필요가 없습니다.
2. 제공 옵션은 객체이거나 객체를 반환하는 함수여야 합니다. 이 개체에는 다른 구성 요소에 주입할 수 있는 속성이 포함되어 있습니다.
3. 제공/주입 해결된 주요 문제는 플러그인 개발에서 자주 사용되는 크로스 레벨 구성 요소 간의 정보 전송입니다.

🎜마지막으로 크로스레벨 컴포넌트 통신과 같은 문제가 발생하면 provide/inject를 사용하여 문제를 해결할 수 있으며, 이는 보다 편리한 프로그래밍 방법을 제공합니다. , 코드를 더욱 간결하고 이해하기 쉽게 만듭니다. 🎜

위 내용은 Vue에서 제공 및 주입은 무엇이며 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!