Vue 에서 구성 요소 간 데이터 전달 예시 코드

4124 단어 vue구성 요소데이터
Vue 에서 구성 요소 의 역할 영역 은 격 리 되 어 있 습 니 다.부모 구성 요소 의 수치 하위 구성 요 소 는 보이 지 않 습 니 다!즉,angular 를 비유 하면 구성 요소 의 scope 는 천성적으로 scope:()의 것 이다!
부모 구성 요소 가 하위 구성 요소 에 데 이 터 를 전송 해 야 한다 면 탭 속성 을 사용 해 야 합 니 다:

<div id="app">
   <my-compo c="886"></my-compo>
</div>
하위 구성 요소 에 서 는 props 로 이 값 을 설명 하면 됩 니 다.또한 template 에 서 는{{c}}을 직접 사용 하여 이 속성 을 얻 을 수 있 습 니 다.{{this.props.c}이 라 고 쓰 지 않 아 도 됩 니 다.}

import Vue from "vue";

const MyCompo = Vue.extend({
  template : `
    <div>
      <h1>  MyCompo  ，  a  {{a}}</h1>
      <h1>   c：{{c}}</h1>
      <input type="button" value="+++" v-on:click="add"/>
    </div>
  `,
  props : ["c"],
  data : function(){
    return {
      a : 1, 
      b : 2
    }
  },
  methods : {
    add : function(){
      this.a ++;
    }
  }
});

export default MyCompo;
부모 구성 요소 에서 동적 값(부모 구성 요소 의 data,죽은 숫자 가 아 닙 니 다)을 전달 하려 면 v-bin:으로 전달 해 야 합 니 다.
v-bind 명령 은 동적 속성 을 표시 합 니 다.

<div id="app">
   <my-compo v-bind:c="c"></my-compo>
</div>
이때 우 리 는 하위 구성 요소 가 이 값 을 바 꾸 었 고 부모 구성 요소 의 값 이 변 하지 않 았 다 는 것 을 연구 했다.답:기본 적 인 상황 에서 변 하지 않 습 니 다!

<my-compo v-bind:c="c"></my-compo>

import Vue from "vue";

const MyCompo = Vue.extend({
  template : `
    <div>
      <h1>  MyCompo  ，  a  {{a}}，  c  ：{{c}}</h1>
      <input type="button" value="+++" v-on:click="add"/>

    </div>
  `,
  props : ["c"],
  methods : {
    add : function(){
      this.c ++;
    }
  }
});

export default MyCompo;
하위 구성 요소 의 c 값 이 변 했 지만 밖 은 변 하지 않 습 니 다!
즉,기본적으로 부모 구성 요소 의 속성 값 이 아들 에 게 전달 되면 하위 구성 요소 가 이 값 을 바 꾸 고 하위 구성 요소 의 값 만 바 꾸 며 부모 구성 요소 의 값 은 변 하지 않 습 니 다.
하위 구성 요소 가 부모 구성 요소 의 값 을 바 꿀 수 있 도록 하려 면 sync 수식 자 를 추가 해 야 합 니 다:

<my-compo v-bind:c.sync="c"></my-compo>
위의 c 속성 은 기본 유형 치 상수 3 입 니 다.이때 우 리 는 형식 값 을 인용 해 보 자.
부모 구성 요소 에 d 속성 을 추가 합 니 다.값 은 json 입 니 다.

import Vue from "vue";
import MyCompo from "./components/MyCompo.js";

new Vue({
  el : "#app",
  data : {
    c : 333,
    d : {
      v : 8888
    }
  },
  components : {
    "my-compo" : MyCompo
  }
});
하위 구성 요소 전달:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue  </title>
</head>
<body>
  <div id="app">
    <h1>    ，  c： {{c}} ，  d:{{d | json}}</h1>
     <my-compo v-bind:c.sync="c" v-bind:d="d"></my-compo>
  </div>

  <script type="text/javascript" src="public/bundle.js"></script>
</body>
</html>
하위 구성 요소 가 d 로 바 뀌 었 을 때 아버지 도 바 뀌 었 어 요!!비록 우 리 는.sync 를 추가 하지 않 았 지만.
요약:
Vue 의 기본 형식 값 은 기본 단 방향 으로 전달 되 며,양 방향 으로 sync 를 추가 합 니 다.
형식 값 을 참조 하여 기본 양 방향 으로 전달 합 니 다.
작은 tip,v-bind 의 줄 임 말 문법 은 가짜 입 니 다.

속성 은 유형,필수 등 을 검증 할 수 있 습 니 다.

props : {
    "c" : null,
    "d" : null,
    "e" : {
      type : Number,
      required : true
    }
},

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
js 음악 재생 제어 바 실현
jquery 플러그 인 jquery.viewport.js 학습 사용 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage