Vue.js父子通信使用props

Question

我使用ve2.0进行了下面的设置。调用something()方法更新父节点上的'place'。我希望孩子看到的变化的地方，当它更新作出相应的反应。然而，子类中的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

是否将place prop传递给组件?

下面是一个工作片段:

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>