Vue 컴포넌트 통신을 위한 데이터 전송 방법은 무엇입니까?

Vue 컴포넌트 통신을 위한 데이터 전송 방법은 무엇입니까?

Vue 개발에서 컴포넌트 통신은 매우 중요한 부분입니다. 컴포넌트 통신을 통해 서로 다른 컴포넌트 간의 데이터 전송 및 상호 작용이 이루어질 수 있습니다. Vue는 소품, 방출, 제공/주입, Vuex 등을 포함하여 구성 요소 통신을 구현하는 다양한 방법을 제공합니다. 이 문서에서는 이러한 다양한 데이터 전송 방법을 설명하고 해당 코드 예제를 제공합니다.

1. props 및 $emit

props는 상위 구성 요소에서 하위 구성 요소에 데이터를 전달하는 데 사용되며, 하위 구성 요소는 props를 통해 전달된 데이터를 받습니다. $emit는 하위 구성 요소가 상위 구성 요소에 데이터를 전달하는 데 사용됩니다. 하위 구성 요소는 이벤트를 트리거하고 $emit를 통해 상위 구성 요소에 데이터를 전달합니다. T & lt; 템플릿 & gt;

rreeee

& lt;/div & gt;

& lt; '

export default {

<child-component :message="message" @update="updateMessage"></child-component>
<p>父组件收到子组件传递过来的数据：{{message}}</p>

}

provide/inject

provide 및 inject는 계층적 구성 요소 간에 데이터를 전달하기 위한 한 쌍의 옵션입니다. 이는 상위 구성 요소를 통해 데이터를 제공함으로써 달성됩니다. 하위 구성 요소에 데이터를 주입합니다. Provide 옵션은 데이터를 제공하고, Inject 옵션은 데이터를 주입합니다. T & lt; 템플릿 & gt;

rreeee
& lt;/div & gt;

& lt; '

export default {

components: {
  ChildComponent
},
data() {
  return {
    message: ''
  }
},
methods: {
  updateMessage(newMessage) {
    this.message = newMessage
  }
}

}

Vuex

Vuex는 Vue에서 공식적으로 제공하는 상태 관리 모델로, 컴포넌트 간 공유되는 데이터를 중앙에서 관리하는 데 사용됩니다. 컴포넌트 간의 데이터 전송과 상호작용은 Vuex의 state, getter, mutation, action 등을 통해 구현됩니다.

// store.js

'vue'에서 Vue 가져오기

'vuex'에서 Vuex 가져오기

Vue.use(Vuex)

기본 새 Vuex.Store 내보내기({

상태: {

<input type="text" v-model="message" />
<button @click="sendMessage">传递数据给父组件</button>

},

getters : {

data() {
  return {
    message: ''
  }
},
methods: {
  sendMessage() {
    this.$emit('update', this.message)
  }
}

},

돌연변이: {

<p>父组件提供数据：{{message}}</p>
<child-component></child-component>

},

작업: {

components: {
  ChildComponent
},
provide() {
  return {
    message: 'Hello World!'
  }
}

}

})

// ParentComponent.vue

<script><li> import ChildComponent from './ChildComponent'</li> import { mapGetters, mapActions } from 'vuex'</ol><p>export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>inject: ['message']</pre><div class="contentsignin">로그인 후 복사</div></div><p>}<br></script>

// ChildComponent.vue


<script></p> import { mapGetters } from 'vuex'<p><br>export default { </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>getMessage: state =&gt; state.message</pre><div class="contentsignin">로그인 후 복사</div></div><p>}<br></script>

위는 Vue 구성 요소 통신을 위한 몇 가지 일반적인 데이터 전송 방법입니다. 각 방법에는 실제 필요에 따라 적절한 데이터 전송 방법을 선택하세요. 이러한 방법을 합리적으로 사용하면 구성 요소 간 유연하고 효율적인 통신이 가능해 개발 효율성과 코드 품질이 향상됩니다.


위 내용은 Vue 컴포넌트 통신을 위한 데이터 전송 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!