Vue 2.0 구성 요소 간 데이터 전달 예시

Vue 1.0 구성 요소 간 전달
  • $on()을 사용 하여 사건 을 감청 합 니 다.
  • $emit()를 사용 하여 이 벤트 를 촉발 합 니 다.
  • $dispatch()를 사용 하여 이벤트 가 부모 체인 을 따라 거품 이 발생 합 니 다.
  • $broadcast()방송 사건 을 사용 하여 모든 후대 에 사건 을 전달 합 니 다
  • Vue 2.0 이후$dispatch(),$broadcast()가 버 려 졌 습 니 다.https://cn.vuejs.org/v2/guide/migration.html#dispatch-broadcast-와 교체 되 었 습 니 다.
    1.부모 구성 요소 가 하위 구성 요소 에 장면 을 전달 합 니 다.Father 의 이전 입력 상 자 는 입력 에 따라 Child 구성 요소 에 전 달 됩 니 다.
    부모 구성 요소:
    
    <template>
     <div>
      <input type="text" v-model="msg">
      <br>
      //      inputValue    msg    
      <child :inputValue="msg"></child>
     </div>
    </template>
    <style>
    
    </style>
    <script>
     export default{
      data(){
       return {
        msg: '   '
       }
      },
      components: {
       child: require('./Child.vue')
      }
     }
    </script>
    
    하위 구성 요소:
    
    <template>
     <div>
      <p>{{inputValue}}</p>
     </div>
    </template>
    <style>
    
    </style>
    <script>
      export default{
        props: {
         inputValue: String
        }
      }
    </script>
    
    
    2.하위 구성 요소 가 부모 구성 요소 에 값 을 전달 하 는 장면:하위 구성 요소 에 입력 상자,입력 값 이 바 뀌 면 부모 구성 요소 가 감청 되 고 팝 업 상자 가 나타 납 니 다.
     부모 구성 요소:
    
    <template>
     <div>
    //message          ;recieveMessage           
      <child2 v-on:message="recieveMessage"></child2>
     </div>
    </template>
    <script>
     import {Toast} from 'mint-ui'
     export default{
      components: {
       child2: require('./Child2.vue'),
       Toast
      },
      methods: {
       recieveMessage: function (text) {
        Toast('        '+text);
       }
      }
     }
    </script>
    
    
    하위 구성 요소:
    
    <template>
     <div>
      <input type="text" v-model="msg" @change="onInput">
     </div>
    </template>
    <script>
     export default{
      data(){
       return {
        msg: '    '
       }
      },
      methods: {
       onInput: function () {
        if (this.msg.trim()) {
         this.$emit('message', this.msg);
        }
       }
      }
     }
    </script>
    위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 Vue 2.0 구성 요소 간 의 데이터 전달 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

    좋은 웹페이지 즐겨찾기