vuejs 2.0 하위 구성 요소 가 부모 구성 요소 의 데이터 인 스 턴 스 를 변경 합 니 다.

vue 2.0 이후 버 전에 서 는 하위 구성 요소 가 부모 구성 요소 의 데 이 터 를 직접 바 꾸 는 것 을 허용 하지 않 습 니 다.1.0 버 전에 서 는 이렇게 조작 할 수 있 습 니 다.그러나 프로젝트 는 부모 구성 요소 의 데 이 터 를 바 꿔 야 합 니 다.2.0 도 가능 합 니 다.차이 점 은 우리 가 부모 요소 의 데 이 터 를 하위 구성 요소 에 전달 할 때 대상 을 전달 해 야 합 니 다.하위 구성 요 소 는 방문 대상 의 속성 조작 데 이 터 를 통 해다음은 데모.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="vue.js"></script>  
  <script type="text/javascript">
    window.onload = function(){
      var app = new Vue({
      el:'#box',
      data:{
        myData:{
          info:'     '
        }
      },
      components:{
        'v-com':{
          props:['data'],
          template:'#tpl',
          methods:{
            change(){
              this.data.info = 'change info'
            }
          }
        }
      }
    })
    }
  </script>
</head>
<body>
  <!--             -->
  <div id="box">
    <div>
      <p>{{myData.info}}</p>
      <v-com :data ="myData"></v-com>
    </div>
  </div>

  <!--    -->
  <template id="tpl">
    <div>
      <button @click="change">change</button>
      <p>{{data.info}}</p>
    </div>
  </template>

</body>
</html>

이 는 데 이 터 를 동기 화 하 는 것 입 니 다.즉,하위 구성 요소 의 데이터 가 바 뀌 고 부모 구성 요소 의 데이터 도 이에 따라 바 뀌 며 다음은 동기 화 되 지 않 은 상황 을 보 여 줍 니 다.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="vue.js"></script>  
  <script type="text/javascript">
    window.onload = function(){
      var app = new Vue({
      el:'#box',
      data:{
        myData:'     '
      },
      components:{
        'v-com':{
          data() {
            return {
              childData:''
            }
          },
          props:['data'],
          // dom    
          mounted(){
            this.childData = this.data
          },
          template:'#tpl',
          methods:{
            change(){
              this.childData = 'change info'
            }
          }
        }
      }
    })
    }
  </script>
</head>
<body>
  <!--            ,    -->
  <div id="box">
    <div>
      <p>{{myData}}</p>
      <v-com :data ="myData"></v-com>
    </div>
  </div>

  <!--    -->
  <template id="tpl">
    <div>
      <button @click="change">change</button>
      <p>{{childData}}</p>
    </div>
  </template>

</body>
</html>

여기 서 교묘 하 게 mounted 라 는 방법 을 통 해 중간 회전 을 하여 원 하 는 효 과 를 실현 하 였 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

vuejs 2.0 하위 구성 요소 가 부모 구성 요소 의 데이터 인 스 턴 스 를 변경 합 니 다.

좋은 웹페이지 즐겨찾기