Vue 구성요소 간에 값을 전달하는 방법

이번에는 Vue 컴포넌트 간 값 전달 방법과 Vue 컴포넌트 간 값 전달 시 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

프런트 엔드에 있는 우리에게 인터페이스 작성은 가장 큰 문제가 아닙니다. 많은 경우에 우리가 집중해야 할 것은 js 페이지의 데이터 전송 등과 같은 데이터입니다. vue를 배울 때 우리도 알아야 합니다. 사용 방법

물론 저장소를 사용하는 것은 가능하지만 캐싱은 필요하지 않습니다. 물론 Vue에서는 데이터 상호 작용을 위해 vuex를 사용하는 것이 좋습니다. Vuex는 Vue 코드를 유연하고 제어 가능하게 만들고 데이터를 상태에 균일하게 저장합니다. . 돌연변이 수정은 작업을 통해서만 트리거될 수 있습니다. 그러나 때로는 우리 프로젝트가 Vuex를 요구할 만큼 복잡하지 않은 경우도 있습니다. , (폐지된 vm.$dispatch에 대해서는 논의하지 않습니다.) 많은 경우 이벤트를 캡처해야 할 때 vue의 eventbus

를 사용할 수 있습니다. 이벤트버스를 사용하는 방법은 매우 간단합니다. 첫 번째 단계는 이벤트버스 역할을 하는 컨테이너를 만드는 것입니다. 두 번째 단계에서는 이벤트를 던지거나 제출해야 합니다

세 번째 단계는 이벤트를 모니터링하는 것입니다(아마도 이것이 두 번째 부분일 것입니다)

먼저 이벤트버스를 전역적으로 정의해야 합니다

여기서는 이벤트버스를 정의합니다. 이것은 단순히 첫 번째 단계를 완료한 것입니다. 물론, 전역 변수가 어디에 정의되어 있는지 알아야 한다고 생각합니다

그런 다음 먼저 이 이벤트를 발생시키고 엔을 사용합니다. "제출"을 위해 방출

어쨌든 이건 이해가 됩니다. 다음으로 모니터링 3단계로 넘어갑니다

틀림없이. 여기에서는 이미 모니터링하고 있습니다. 클릭이벤트는 부담스러울 뿐입니다

다음으로 인터페이스에서 사용해야 합니다

먼저 필요한 파일을 가져옵니다.

여기서는 transimissionone과 transimissiontwo '

라는 두 개의 파일을 사용하고 있습니다. 다음은 정의입니다

두 번째는

를 사용하는 것입니다. 마지막으로 프로젝트를 실행하고 효과를 확인해보세요

이는 주로 모든 사람이 사용하는 것이므로 코드는 주로 4개의 파일로 아래에 캡처됩니다

전이음. vue(이벤트를 보내는 파일)

<template> 
  <p class="transimission1"> 
  <button @click="get">点击发送数值到eventbus中</button>  
  </p> 
   
</template> 
 
<script> 
  export default { 
    name: "transimission1", 
    methods: { 
      get: function() { 
        console.log("Aaa"); 
        eventBus.$emit('eventBusName', "hellokugou"); 
      } 
    }, 
  } 
</script> 
<style> 
</style>

transittwo(청취자)가 이어집니다

<template> 
  <p class="transimissiontwo"> 
    <button @click="method1">点击console.log出eventbus的信息 
</button> 
  </p> 
</template> 
 
<script> 
  export default { 
    name: "transimissiontwo", 
    methods: { 
      method1: function() { 
        //使用on老监听事件 
        eventBus.$on('eventBusName', function(val) {  
          console.log("这个是用transimissiontwo的val值为："+val) 
        }) 
      } 
    } 
  } 
</script> 
<style> 
 
</style>

다음은 우리의 허브입니다. 앱. vue에서

<template> 
  <p id="app"> 
    <click></click> 
  <transimissiontwo></transimissiontwo> 
    <transimissionone></transimissionone> 
  <sendparent @listenertochildevent="getmessagefromchild"></sendparent> 
    <value :locallogo="netlogo"></value> 
    <!--无法监听，说明要在那个组件中--> 
    <button @listenertochildevent="getmessagefromchild">测试能否监听</button> 
    <my_plug_in></my_plug_in> 
    <p class="choose_p"> 
      <ul> 
        <li> 
          <router-link to="/foo">foo页面</router-link> 
        </li> 
        <li> 
          <router-link to="/header">header页面</router-link> 
        </li> 
        <li> 
          <router-link to="/hello">hello页面</router-link> 
        </li> 
        <li style="clear: both;list-style: none;"></li> 
      </ul> 
    </p> 
    <p class="main"> 
      <router-view class="my_router_iew"></router-view> 
    </p> 
    <testmintui></testmintui> 
  </p> 
</template> 
 
<script> 
  import value from './components/value' 
  import click from "./components/click" 
  import my_plug_in from "./components/plug_in" 
  import sendparent from "./components/send_parent" 
  import testmintui from "./components/Test_mint-ui" 
  import transimissiontwo from "./components/transimissiontwo" 
  import transimissionone from "./components/transimissionone" 
  export default { 
    name: 'app', 
    data() { 
      return { 
        netlogo: "主页显示信息到组件中" 
      } 
    }, 
    components: { 
      value, 
      click, 
      my_plug_in, 
      sendparent, 
      testmintui, 
      transimissionone, 
    transimissiontwo, 
     
    }, 
    methods: { 
      getmessagefromchild: function(data) { 
        console.log(data); 
      } 
    } 
  } 
</script> 
<style> 
  body { 
    background-color: #f8f8ff; 
    font-family: 'Avenir', Helvetica, Arial, sans-serif; 
    color: #2c3e50; 
  } 
  ul { 
    width: 12rem; 
  } 
  ul li { 
    list-style: none; 
  } 
  ul li:not(:last-child) { 
    list-style: none; 
    width: 2rem; 
    margin-left: 0.1rem; 
    margin-right: 0.1rem; 
    float: left; 
    text-align: center; 
    background: #2C3E50; 
    color: white; 
  }    
  ul li a { 
    text-decoration: none; 
    font-size: 16px; 
    color: white; 
    line-height: 1rem; 
    text-align: center; 
  } 
  ul li:nth-child { 
    list-style: none; 
    clear: both; 
  } 
  .choose_p { 
    width: 100%; 
    overflow: scroll; 
  } 
</style>

를 사용하세요. 쓸모없는 코드는 무시하세요. 다음 단계는 eventbus

window.eventBus = new Vue();

를 정의하는 것입니다. 아주 간단합니다

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

3D 효과를 구현하는 Angular4

선택한 보조 연결 드롭다운 메뉴를 구현하는 AngularJS 단계별 설명

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