vue-cli에서 컴포넌트 통신을 구현하는 방법-JS 튜토리얼-php.cn

vue-cli에서 컴포넌트 통신을 구현하는 방법

亚连

풀어 주다： 2018-06-20 15:15:22

원래의

1794명이 탐색했습니다.

이 글에서는 주로 vue-cli의 컴포넌트 통신 방법을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 에디터를 따라가서 살펴볼까요

이 글에서는 vue-cli의 컴포넌트 통신 방법을 소개하고 모두와 공유합니다. 자세한 내용은 다음과 같습니다.

vue 구성 요소 간 통신에는 세 가지 유형이 있습니다.

1. 상위 구성 요소는 하위 구성 요소와 통신합니다.
2. 하위 구성 요소는 상위 구성 요소와 통신합니다.

1. 하위 구성 요소 간 통신

app.vue를 상위 구성 요소로, content.vue를 하위 구성 요소로 사용

1 상위 구성 요소에서 하위 구성 요소 가져오기(하위 구성 요소 내보내기)

import contents from &#39;./components/content&#39;;

로그인 후 복사

2. 상위 구성 요소의 하위 구성 요소

  data() {
    return {
        test:&#39;0&#39;
    };
  },
  components:{
    &#39;v-header&#39;:headers,
    &#39;v-content&#39;:contents
  }

로그인 후 복사

3. 하위 구성 요소는 props

<v-content :childs=&#39;test&#39;></v-content>

로그인 후 복사

2를 통해 데이터를 받습니다. -자식 구성 요소 통신

<template>
  <p @click="down()"></p>
</template>

methods: {
  down() {
    this.$emit(&#39;down&#39;,&#39;null&#39;); //主动触发down方法，&#39;null&#39;为向父组件传递的数据
  }
}

로그인 후 복사

구성 요소 1 트리거:

<p>
  <child @down="changes" :test="test"></child> //监听子组件触发的down事件,然后调用changes方法
</p>
methods: {
  changes(msg) {
    this.test= test;
  }
}

로그인 후 복사

구성 요소 2 수신:

//把a当作一个中转站
var a = new Vue();

로그인 후 복사

위 내용은 제가 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

vue-cli에서 모바일 적응을 구현하는 방법

Vue 구성 요소에서 표시 상자 효과를 구현하는 방법 Toast

webpack의 규칙 매개변수 처리 정보

in AngularJS 방법 간단한 계산 구현

위 내용은 vue-cli에서 컴포넌트 통신을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!