Vue2.0에서 컴포넌트 및 상위-하위 컴포넌트 통신을 구현하는 방법-JS 튜토리얼-php.cn

Vue2.0에서 컴포넌트 및 상위-하위 컴포넌트 통신을 구현하는 방법

亚连

풀어 주다： 2018-06-21 13:56:48

원래의

1608명이 탐색했습니다.

이 글은 주로 Vue 2.0 학습에서의 Vue 컴포넌트와 부모-자식 컴포넌트 통신에 대한 자세한 설명을 소개하고 있어서 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 에디터를 따라가며 함께 살펴볼까요

컴포넌트란 무엇인가요?

vue의 구성 요소는 컴퓨터의 모든 구성 요소(예: 하드 디스크, 키보드, 마우스)와 마찬가지로 실제로 페이지의 일부이며 독립적인 논리 또는 인터페이스를 가지며 동시에 그에 따라 서로 상호 작용할 수 있습니다. 지정된 인터페이스 규칙에 통합됩니다.

페이지는 탐색, 목록, 팝업창, 드롭다운 목록 등 이런 부분으로 구성되어 있습니다. 페이지는 이러한 구성 요소를 위한 컨테이너일 뿐입니다. 구성 요소는 자유롭게 결합되어 완전한 기능을 갖춘 인터페이스를 형성합니다. 구성 요소가 필요하지 않거나 교체하려는 경우 작업에 영향을 주지 않고 언제든지 교체하고 삭제할 수 있습니다. 전체 응용 프로그램.

프런트엔드 컴포넌트화의 핵심 아이디어는 거대하고 복잡한 것을 합리적인 세분성을 가지고 작은 것으로 분할하는 것입니다.

컴포넌트를 사용하면 어떤 이점이 있나요?

1. 개발 효율성 향상
2. 재사용이 편리함
3. 디버깅 단계 단순화
4. 전체 프로젝트의 유지 관리 용이성

vue의 구성 요소입니다. vue.js의 컴파일러는 여기에 특수 기능을 추가합니다. vue의 구성 요소는 기본 HTML 요소를 확장하고 구성 요소의 기본 구성 요소인 스타일 구조, 동작 논리, 데이터를 캡슐화할 수도 있습니다.

전역 등록

모든 템플릿에서 사용할 수 있으며 사용하기 전에 등록해야 합니다

구문: Vue.comComponent 사용(컴포넌트 이름, 옵션 개체)

컴포넌트 이름 명명 규칙: Camel Case, 구운 문자열

HTML에서 구성 요소 사용: 문자열 명명 방법을 사용하세요

예를 들어 를 사용할 때 Vue.compontent('my-compontent',{})를 등록하세요

<p id="app">
    <h2>自定义下拉框</h2>
    <cus-list></cus-list>
    <cus-list></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
  // 全局注册组件
  Vue.component(&#39;cus-list&#39;,{
    data(){
      return {
        
      }
    },
    template:`
      <section>
        <p>
          <p>
            <input type="text">
            <input type="button" name="" value="">
            <span></span>
          </p>
        </p>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

로그인 후 복사

를 사용할 때

, 페이지에서 이 구성요소를 호출하면 사용 및 재사용이 가능합니다.

Component.png

부분 등록

컴포넌트 인스턴스의 옵션 객체를 통해 등록, 등록된 범위에서만 사용

<p id="app">
    <h2>自定义下拉框</h2>
    <cus-list></cus-list>
    <cus-list></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script>
  new Vue({
    el:"#app",
    components:{
      &#39;cus-list&#39;:{
        template:`
          <section>
            <p>
              <p>
                <input type="text">
                <input type="button" name="" value="">
                <span></span>
              </p>
            </p>
          </section>
        `
      }
    },
    data:{
      
    }
  })
</script>

로그인 후 복사

부분 등록된 컴포넌트, 현재 인스턴스의 범위에서만 가능 전용이며 범위 내에서 재사용도 가능합니다. 효과는 다음과 같습니다.

Component.png

부모 컴포넌트와 자식 컴포넌트 간의 통신

부모 컴포넌트는 자식 컴포넌트와 통신합니다.

부모 컴포넌트 ===》자식 컴포넌트(props 사용)

컴포넌트 인스턴스의 범위는 다음과 같습니다. 격리된 경우 하위 구성 요소는 상위 구성 요소의 데이터를 직접 사용할 수 없습니다.

사용자 정의 속성을 사용하여 구성 요소에 데이터를 바인딩할 수 있고, props를 사용하여 구성 요소에 표시할 속성 이름을 사용자 정의할 수 있습니다.

즉, 한 문장만 기억하시면, 상위 컴포넌트가 하위 컴포넌트에 값을 전달하는 경우 해당 컴포넌트 호출 시 해당 컴포넌트에 속성을 추가한 후, 이를 컴포넌트에서 전달받기 위해 props를 사용할 수 있습니다. 구성 요소의 속성 이름에 따라 사용됩니다.

<p id="app">
  <h2>自定义下拉框</h2>
  <cus-list btn-value="查询"></cus-list>
  <cus-list btn-value="搜索"></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script>
  Vue.component(&#39;cus-list&#39;,{
    data(){

    },
    props:[&#39;btnValue&#39;],
    template:`
      <section>
        <p>
          <p>
            <input type="text">
            <input type="button" name="" :value="btnValue">
            <span></span>
          </p>
        </p>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

로그인 후 복사

페이지 효과

props pass value.png

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

하위 구성 요소===》상위 구성 요소

는 사용자 정의 시간을 사용해야 하며, 상위 구성 요소는 $ on을 사용하여 사용자 정의 이벤트를 수신하고 $emit는 상위 구성 요소가 관심을 갖는 사용자 정의 이벤트를 트리거합니다.

1. 하위 구성요소

2. v-on v-on:receive="changeValue"

3에서 사용자 정의 이벤트를 수신합니다. 하위 구성 요소 이벤트를 트리거할 때 $emit는 상위 구성 요소에 this.$emit("receive",item);

4을 알립니다. 상위 컴포넌트는 커스텀 이벤트를 기반으로 해당 피드백을 제공합니다. 입력 상자에 목록 내용이 나타납니다.

  <p id="app">
    <h2>自定义下拉框</h2>
    <cus-list select-Value="搜索" v-bind:list="list1" >
    </cus-list>
  </p>
  <script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
  <script type="text/javascript">
  // 全局注册组件
  Vue.component(&#39;cus-list&#39;,{
    data(){
      return {
        selectShow:false,
        val:&#39;&#39;
      }
    },
    props:[&#39;selectValue&#39;,&#39;list&#39;],
    template:`
      <section>
        <p>
          <p>
            <input type="text" @click="selectShow = !selectShow" :value="val">
            <input type="button" name="" :value="selectValue">
          </p>
          <list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>
        </p>
      </section>
    `,
    methods:{
      changeValue:function(value){
        this.val = value;
      }
    }
  })
  Vue.component(&#39;list-li&#39;,{
    props:[&#39;list&#39;],
    template:`
        <ul>
          <li v-for="item of list" @click="clickLi(item)">{{item}}</li>
        </ul>
    `,
    methods:{
      clickLi:function(item){
        this.$emit("receive",item);
      }
    }
  })
  new Vue({
    el:"#app",
    data:{
      list1:[&#39;宋仲基&#39;,&#39;余文乐&#39;,&#39;鹿晗&#39;,&#39;陈小春&#39;,&#39;黄晓明&#39;,&#39;易烊千玺&#39;]
    }
  })
  </script>

로그인 후 복사

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