vue의 컨텍스트에서 값을 전달하는 방법

Context API를 사용하면 데이터를 제공하는 공급자 구성 요소를 정의한 다음 inject() 함수를 사용하여 하위 구성 요소에 액세스하여 구성 요소 간에 데이터를 전달할 수 있습니다. 구체적인 단계에는 공급자 구성 요소의 제공() 함수를 사용하여 공급자 구성 요소를 정의하는 것이 포함됩니다. 공유 데이터에 접근해야 하는 컴포넌트에 값을 주입하려면 inject() 함수를 사용하세요. 주입된 값에 액세스합니다.

Vue에서 Context를 사용하여 값 전달

Context는 구성 요소 트리의 구성 요소 간에 데이터를 전달할 수 있는 Vue.js 생태계의 API입니다. 공급자 구성 요소에서 값을 정의한 다음 하위 구성 요소의 주입 API를 통해 해당 값에 액세스하여 이를 수행합니다.

컨텍스트를 사용하여 값을 전달하는 방법

공급자 구성 요소 만들기

provider() 함수를 사용하여 공급자 구성 요소를 정의합니다. 이 구성 요소는 공유해야 하는 데이터를 제공합니다.

<code class="javascript">import { provide } from 'vue';

export default {
  setup() {
    provide('myValue', 'Hello World!');
  }
}</code>

값 주입

공유 데이터에 접근해야 하는 컴포넌트에서는 inject() 함수를 사용하여 값을 주입합니다.

<code class="javascript">import { inject } from 'vue';

export default {
  setup() {
    const myValue = inject('myValue');
    return { myValue };
  }
}</code>

삽입된 값에 액세스 ​​

이제 주입된 값에 ​​구성 요소의 템플릿이나 스크립트에서 액세스할 수 있습니다.

<code class="html"><template>
  <h1>{{ myValue }}</h1>
</template></code>

예제

부모 및 자식 구성 요소가 있는 구성 요소 트리를 생각해 보세요. 상위 구성 요소는 하위 구성 요소가 액세스해야 하는 'myValue' 값을 제공합니다.

상위 구성 요소(Provider.vue)

<code class="javascript"><script>
import { provide } from 'vue';

export default {
  setup() {
    provide('myValue', 'Hello World!');
  }
}
</script></code>

하위 구성 요소(Consumer.vue)

<code class="javascript"><script>
import { inject } from 'vue';

export default {
  setup() {
    const myValue = inject('myValue');
    return { myValue };
  }
</script></code>

Result

Consumer.vue가 렌더링되면 상위 구성 요소에서 제공하는 'myValue' 값에 액세스합니다. UI에 표시합니다.

위 내용은 vue의 컨텍스트에서 값을 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!