小道具を使用したVue.js親子通信

Question

vue2.0を使用して以下の設定を行っています。親の「場所」を更新するメソッドsomething（）が呼び出されます。私は子どもが場所の変更を監視し、それに応じて対応するように更新することを望みます。ただし、子のwatchメソッドは呼び出されません。何が間違っていますか？

おかげで、

// parent 
import home from './components/home.vue' 

var App = window.App = new Vue({ 
data: { 
    place: '', 
}, 
methods: { 
    something: function(event) { 
    this.place = 'some new place' 
    }) 
}, 
components: { 
    'home': home, 
} 
}).$mount('#app') 

// child ('./components/home.vue') 
export default { 
    props: ['place'], 
    // need to react here when place changes 
    watch: { 
    place: function (val, oldVal) { 
     console.log('new: %s, old: %s', val, oldVal) 
    }, 
} 

Answer 1

は、あなたがコンポーネントに場所の小道具を渡すのですか？

var home = { 
 
    props: ['place'], 
 
    template: '<div>home: {{ place }}</div>', 
 
    watch: { 
 
    place: function (val, oldVal) { 
 
     console.log('new: %s, old: %s', val, oldVal) 
 
    } 
 
    } 
 
}; 
 

 
var App = new Vue({ 
 
    el: '#app', 
 
    components: { 
 
    'home': home 
 
    }, 
 
    data: { 
 
    place: 'somewhere' 
 
    }, 
 
    methods: { 
 
    something: function(event) { 
 
     this.place = 'some new place' 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 
<div id="app"> 
 
    <button @click="something">set place</button> 
 
    <p>app: {{ place }}</p> 
 
    <home :place="place"></home> 
 
</div>