vue.js 구성요소 간에 데이터를 전달하는 방법

머리말

구성 요소는 vue.js의 가장 강력한 기능 중 하나이며 구성 요소 인스턴스의 범위는 서로 독립적이므로 서로 다른 구성 요소 간의 데이터가 서로 참조할 수 없습니다. 데이터를 전송하는 방법도 구성요소의 중요한 지식 포인트 중 하나가 되었습니다.

Components

구성 요소 간에도 다양한 관계가 있습니다. 아버지와 아들, 형제의 관계(아버지와 아들이 아닌 사람은 일시적으로 형제라고 부릅니다).

원저자: Lin Xin, 작성자 블로그:

상위-하위 구성 요소

상위-하위 관계는 구성 요소 A가 템플릿의 구성 요소 B를 사용하고 구성 요소 A가 상위 구성 요소이고 구성 요소 B가 하위 구성 요소임을 의미합니다.

// 注册一个子组件Vue.component(&#39;child&#39;, {data: function(){text: &#39;我是father的子组件！&#39;}template: &#39;<span>{{ text }}</span>&#39;})// 注册一个父组件Vue.component(&#39;father&#39;, {template: &#39;<div><child></child></div>&#39;  // 在模板中使用了child组件})

아버지 구성 요소를 직접 사용하는 경우:

<div id="app"><father></father></div>

페이지가 렌더링됩니다. 나는 아버지의 자식 구성 요소입니다!

아버지 컴포넌트는 템플릿에서 자식 컴포넌트를 사용하므로 부모 컴포넌트이고, 자식 컴포넌트를 사용하므로 자식 컴포넌트는 자식 컴포넌트입니다.

동위 구성 요소

두 구성 요소가 서로 참조하지 않으면 형제 구성 요소입니다.

Vue.component(&#39;brother1&#39;, {template: &#39;<div>我是大哥</div>&#39;})Vue.component(&#39;brother2&#39;, {template: &#39;<div>我是小弟</div>&#39;})

구성 요소를 사용하는 경우:

<div id="app"><brother1></brother1><brother2></brother2></div>

페이지가 렌더링됩니다.

나는 형입니다

나는 동생입니다

Prop

하위 구성 요소가 상위 구성 요소의 데이터를 사용하려는 경우 상위 구성 요소가 전달한 데이터를 얻으려면 하위 구성 요소의 props 옵션을 사용해야 합니다. 아래에서는 .vue 파일의 형식을 사용하여 예제를 작성합니다.

데이터 전달 방법

부모 컴포넌트 father.vue에서 자식 컴포넌트 child.vue를 참조하고 name 값을 자식 컴포넌트에 전달합니다.

<template><div class="app">// message 定义在子组件的 props 中<child :message="name"></child></div></template><script>import child from &#39;./child.vue&#39;;export default {components: {child},data() {return {name: &#39;linxin&#39;}}}</script>

하위 구성 요소 child.vue

<template><span>Hello {{message}}</span></template><script>export default {// 在 props 中声明获取父组件的数据通过 message 传过来props: [&#39;message&#39;]}</script>

의 props 옵션에서 얻을 것으로 예상되는 데이터를 선언하면 페이지가 렌더링됩니다. Hello linxin

단방향 데이터 흐름

상위 구성 요소 변경이 발생하면 하위 구성 요소는 해당 보기를 자동으로 업데이트합니다. 하지만 하위 구성 요소에서는 소품을 수정하고 싶지 않습니다. 이러한 데이터를 수정해야 하는 경우 다음 방법을 사용할 수 있습니다.

방법 1: prop을 로컬 변수에 할당한 다음 수정이 필요한 경우 prop

export default {data(){newMessage: null  },props: ['message'],created(){this.newMessage = this.message;}}

에 영향을 주지 않고 로컬 변수를 수정합니다. 방법 2: 계산된 속성

export default {props: ['message'],computed{newMessage(){return this.newMessage + ' 哈哈哈';}}}

Custom events

prop의 프로세스 props는 단방향 바인딩입니다. 즉, 상위 구성 요소의 속성이 변경되면 하위 구성 요소로 전송되지만 그 반대 방향으로는 전송되지 않습니다. 하위 구성 요소의 prop 값을 수정하면 뷰를 업데이트하기 위해 상위 구성 요소로 다시 전달되지 않습니다. 그렇다면 하위 구성 요소는 상위 구성 요소와 어떻게 통신합니까?

맞춤 이벤트입니다. 상위 구성 요소인 $on(eventName)에서 사용자 정의 이벤트를 수신하여 하위 구성 요소의 $emit(eventName)이 사용자 정의 이벤트를 트리거하면 상위 구성 요소가 해당 작업을 수행합니다.

예를 들어 상위 컴포넌트에서 팝업 하위 컴포넌트의 표시를 제어하는 ​​경우 하위 컴포넌트에서 닫기를 누른 후 상위 컴포넌트에 이를 숨기라고 지시하면 상위 컴포넌트가 다음 작업을 수행합니다. 팝업 상자를 숨깁니다.

<template><div class="app">// hide 为自定义事件，名字可以自己随便起，不能有大写字母，可以使用短横线
        // @hide 监听子组件触发 hide 事件，则会执行 hideDialog 方法<dialog :is-show="show" @hide="hideDialog"></dialog><button @click="showDialog">显示弹框</button></div></template><script>import dialog from &#39;./dialog.vue&#39;;export default {components: { dialog },data() {return {show: false}},methods: {showDialog() {this.show = true;},hideDialog() {this.show = false;}}}</script>

하위 구성 요소 대화 상자에서:

<template><div class="dialog" v-show="isShow"><p>这里是弹框子组件</p><button @click="toHide">关闭弹框</button></div></template><script>export default {// 驼峰式命名的 prop 需要转换为相对应的短横线隔开式 is-showprops: [&#39;isShow&#39;],methods: {toHide(){// $emit 方法触发父组件的监听事件this.$emit(&#39;hide&#39;);}}}</script>

이것은 상위 구성 요소와 하위 구성 요소 간의 상호 통신을 달성합니다.

Vuex

위의 예는 모두 부모-자식 관계의 구성 요소를 기반으로 하지만 다른 수준의 관계에서는 구현하기가 더 번거롭습니다. 그러면 Vuex는 다양한 구성 요소 간에 실시간으로 통신하는 데 더 도움이 될 수 있습니다. Vuex에 관해서는 내 다른 기사를 확인하실 수 있습니다. Vuex는 할 일 항목의 상태 관리를 모듈화합니다

요약

컴포넌트 통신에는 반드시 Vuex를 사용할 필요는 없습니다. 간단한 데이터 전송의 경우 prop도 완료할 수 있습니다. 본 글에서는 실제 실습에서는 하위 컴포넌트를 표시하거나 숨기는 경우에는 메모장을 예로 들고, 컴포넌트 간의 데이터 상태 관리는 vuex를 사용하여 설명합니다.

위 내용은 vue.js 구성요소 간에 데이터를 전달하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!