vue 2.0 구성 요소 통신 의 각종 상황 정리 와 사례 분석

props vue 구성 요소 에서 다양한 역할 요약
Vue 에서 구성 요 소 는 모듈 화 개발 을 실현 하 는 주요 내용 이 고 구성 요소 의 통신 은 vue 데이터 구동 의 영혼 이다.현재 네 가지 주요 상황 에 대해 다음 과 같이 요약 한다.
props 를 사용 하여 데 이 터 를 전달 합 니 다-구성 요소 내부

//html
<div id="app1">
  <i>      ：  html   my-message</i>
  <child my-message="        "></child>
</div>
//js
<script>
  Vue.component('child', {
    props: ['myMessage'],
    template: '<mark>{{ myMessage }}<mark/>'
  });
  new Vue({
    el: '#app1'
  })
</script>

동적 props 통신-구성 요소 와 루트 노드(부자 간)

<div id="app2">
  <input v-model="parentMsg">
  <br>
  <child :parent-msg="parentMsg"></child>
</div>
<script>
  Vue.component('child', {
    props: ['parentMsg'],
    template: '<mark>{{ parentMsg }}<mark/>'
  });
  new Vue({
    el: '#app2',
    data: {
      parentMsg: 'msg from parent!'
    }
  })
</script>

비교 분석:
예 1:

<comp some-prop="1"></comp>
//        ，       :        "1" 

예 2:

<comp v-bind:some-prop="1"></comp>
//          ，      :       :js    

단 방향 데이터 흐름 특징:부모 구성 요소 속성 변화 시 하위 구성 요소 에 전 달 됩 니 다.그렇지 않 으 면 안 됩 니 다.
prop 상황 변경
자 바스 크 립 트 에서 대상 과 그룹 은 인용 형식 입 니 다.같은 메모리 공간 을 가리 키 며,prop 이 대상 이나 그룹 이 라면 하위 구성 요소 내부 에서 변경 하면 부모 구성 요소 의 상태 에 영향 을 줄 수 있 습 니 다.

//      data  ，   prop               
props: ['initialCounter'],
    data: function () {
    return { counter: this.initialCounter }
    }
//      computed  ，     prop       
 props: ['size'],
    computed: {
    normalizedSize: function () {
    return this.size.trim().toLowerCase()
    }
    }

하위 구성 요소 인덱스
props 와 이벤트 가 있 음 에 도 불구 하고 자 바스 크 립 트 에서 하위 구성 요 소 를 직접 방문 해 야 할 때 가 있 습 니 다.이 를 위해 ref 를 사용 하여 하위 구성 요소 에 색인 ID 를 지정 할 수 있 습 니 다.

<div id="parent">
<!-- vm.$refs.p will be the DOM node -->
<b ref="p">hello</b>
<!-- vm.$refs.child will be the child comp instance -->
<user-profile v-for='i in 3' ref="profile"></user-profile>
</div>
<script>
var userPf=Vue.component('user-profile',{
  template:'<div>hello $refs</div>'
});
var parent = new Vue({ el: '#parent' });
//      
var child = parent.$refs.profile;
console.log(child[0]);
console.log(parent.$refs.p);
</script>

$refs 는 구성 요소 렌 더 링 이 끝 난 후에 만 채 워 집 니 다.비 응답 식 입 니 다.이것 은 하위 구성 요소 에 직접 접근 하 는 응급 방안 일 뿐 입 니 다.모듈 이나 계산 속성 에서$refs 를 사용 하 는 것 을 피해 야 합 니 다.
데이터 반전-사용자 정의 이벤트
사용자 정의 이벤트 의 기반 은 모든 vue 인 스 턴 스 가 이벤트 인터페이스(Event interface)를 실현 하 는 데 있 습 니 다.
Vue 의 이벤트 시스템 은 브 라 우 저의 EventTarget API 에서 분 리 됩 니 다.실행 이 유사 하지만$on 과$emit 는 addEventListener 와 dispatch Event 의 별명 이 아 닙 니 다.
 부모 구성 요 소 는 하위 구성 요 소 를 사용 하 는 곳 에서 하위 구성 요소 가 촉발 하 는 이 벤트 를 직접 v-on 으로 감청 할 수 있 습 니 다.

감청:$on(eventName)

촉발:$emit(eventName)

<div id="app3">
<p>Look at the parent's data: <mark>{{t}}</mark> & the child's data: <mark>{{childWords}}</mark></p>
<child v-on:add="pChange"></child>
<child v-on:add="pChange"></child>
<child v-on:click.native="native"></child>
</div>
<script>
Vue.component('child', {
  template: `<button @click="add">{{ c }}</button>`,
  data: function () {
    return {
      c: 0,
      msg: 'I am from child\'s data'
    }
  },
  methods: {
    add: function () {
      this.c += 1;
      this.$emit('add',this.msg);
    }
  },
});
new Vue({
  el: '#app3',
  data: {
    t: 0,
    childWords: ''
  },
  methods: {
    pChange: function (msg) {
      this.t += 1;
      this.childWords=msg;
    },
    native:function () {
      alert('I am a native event ,which comes from the root element！');
    }
  }
})
</script>

형제 간 통신-간단 한 장면 용 bus,복잡 한 장면 용 vuex

<div id="app4">
  <display></display>
  <increment></increment>
</div>
<script>
  var bus = new Vue();
  Vue.component('increment', {
    template: `<button @click="add">+</button>`,
    data: function () {
      return {count: 0}
    },
    methods: {
      add: function () {
        bus.$emit('inc', this.count+=1)
      }
    }
  });
  Vue.component('display', {
    template: `<span>Clicked: <mark>{{c}}</mark> times</span>`,
    data: function () {
      return {c: 0}
    },
    created: function () {
      var self=this;
//      bus.$on('inc', function (num) {
//        self.c = num
//      });
      bus.$on('inc', (num) =>
        this.c = num
      );
    }
  });
  vm = new Vue({
    el: "#app4",
  })
</script>

요약:Vue 에서 구성 요소 간 및 구성 요소 와 루트 노드 간 의 통신 은 모두 부자 형제 간 의 통신 이 될 수 있 습 니 다.또한 부자 관 계 는 상대 적 인 문맥 과 관련 이 있 습 니 다(예 를 들 어 A 구성 요소 의 부모 구성 요 소 는 B 구성 요소 의 하위 구성 요소 일 수 있 습 니 다).상술 한 네 가지 예 는 서로 다른 구성 요소 통신 의 메커니즘 을 각각 보 여 주 었 다.
상술 한 문 제 를 분명하게 밝 히 면 이 말 을 이해 하기 어렵 지 않다.
컴 파일 역할 영역-부모 구성 요소 템 플 릿 의 내용 은 부모 구성 요소 역할 영역 에서 컴 파일 합 니 다.하위 구성 요소 템 플 릿 의 내용 은 하위 구성 요소 역할 영역 에서 컴 파일 됩 니 다.배포 내용 은 부모 구성 요소 역할 영역 에서 컴 파일 됩 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.