vue JS가 상위에서 구성 요소로 변경 내용을 전파하지 않음

vue JS가 상위에서 구성 요소로 변경 내용을 전파하지 않음

나는 Vue Framework에 꽤 익숙하지 않다.속성이 추가 또는 제거되거나 나중에 구성 요소 외부에서 업데이트될 때마다 부모에서 자식으로의 변경 사항을 전파하려고 한다.아래 코드 조각에서 나는 부모 노드에서 속성으로 전달된 노드의 이름 속성을 기반으로 인사말 메시지를 표시하는 구성요소를 작성하려고 한다.

초기화할 때 노드에 "name" 속성(아래 코드 조각 주석)이 포함되어 있으면 모든 것이 정상적으로 작동한다.그러나 이름 속성이 실행의 후기 단계에 추가된 경우(여기서 시연 목적을 위해 설정된 시간 초과 값을 추가하고 적용)구성 요소가 오류를 발생시키고 변경 사항이 반영되지 않는다. 구성 요소 외부의 다른 이벤트를 기반으로 생성되는 구성 요소의 동적 속성에 대한 변경 사항을 어떻게 전파할 수 있는지 모르겠다.

기본적으로 서버 응답에 따라 다른 유형의 위젯을 표시하는 구성요소를 전달된 특성에 따라 동적 방식으로 업데이트하고 싶었다.속성이 업데이트될 때마다 구성 요소 자체를 업데이트하십시오.Vuejs에서 왜 양방향 바인딩이 제대로 작동하지 않는가?

Vue.component('greeting', {
    template: '#treeContainer',
    props: {'message':Object},
    watch:{
        'message': {
            handler: function(val) {
                console.log('###### changed');
            },
            deep: true
        }
    }
});

var data = {
    note: 'My Tree',
    // name:"Hello World",
    children: [
      { name: 'hello' },
      { name: 'wat' }
    ]
}

function delayedUpdate() {
    data.name='Changed World';
    console.log(JSON.stringify(data));
}

var vm = new Vue({
    el: '#app',
    data:{
        msg:data
    },
    method:{ }
});

setTimeout(function(){ delayedUpdate() ;}, 1000)

<script src="https://vuejs.org/js/vue.js"></script>
<div id="app">
  <greeting :message="msg"></greeting>
</div>
<script  type="text/x-template"  id="treeContainer">
	<h1>{{message.name}}</h1>
</script>

편집 1: @Craig의 답변은 속성 이름과 각 속성에 설정된 호출로 변경 사항을 전파하는 데 도움이 된다.그러나 데이터가 복잡하고 인사말이 노드의 많은 속성에 기초한다면 어떨까.여기 예에서 간단한 사용 사례를 살펴보았지만, 실제 환경에서 위젯은 서버에서 동적으로 전송되는 많은 속성을 기반으로 하며 각 위젯 속성은 위젯 유형에 따라 다르다."Welcome, {{message.name}}}과 같이 {{message.location}}}의 온도는 {{message 입니다.temp}}. "등등등.노드의 속성이 다르기 때문에, 우리가 우리의 Javascript 코드와 각각의 속성에 설정된 호출에서 전체 트리를 통과하지 않고 완전한 트리를 업데이트할 수 있는 방법이 있는가?VUE 프레임워크에 이것을 처리할 수 있는 것이 있는가?

Vue설정된 방법을 사용하지 않는 한 속성 추가 또는 삭제를 감지할 수 없음(https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats), 참조, 필요한 경우:

Vue.set(data, 'name', 'changed world')

여기 JSFiddle: https://jsfiddle.net/f7ae2364/

편집

자네 같은 경우에는, 그 영화관람을 포기해야 할 것 같네.prop대신 데이터를 통과하지 않으려면 이벤트 버스를 이용하십시오.먼저 구성 요소가 들을 수 있도록 글로벌 버스를 설정하십시오.

var bus = new Vue({});

그리고 당신이 새로운 데이터를 받을 수 있다.$emit업데이트된 데이터가 포함된 버스 이벤트:

bus.$emit('data-updated', data);

그리고 구성 요소 내에서(생성된 후크 내부에 배치될 수 있는) 해당 이벤트를 청취하고 메시지를 업데이트하고 강제 적용vue구성 요소를 다시 렌더링(사용 중)ES6여기:

created(){
   bus.$on('data-updated', (message) => {
     this.message = message;
     this.$forceUpdate();
   })
}

여기 JSFiddle: https://jsfiddle.net/9trhcjp4/

참조URL: https://stackoverflow.com/questions/41813616/vue-js-not-propagating-changes-from-parent-to-component