javascript - Vuejs父级数据变化了，怎么同步到子组件中啊？

Question

1.父组件中的值变化了，为什么没有通过props传递给子组件啊，

  <p id="app">
    <p @click="incrementTotal">请点击</p>
    <ul>
    <todo-item :message="message"></todo-item>
    </ul>
    </p>  

  Vue.component('todo-item', {
              template: '<li>{{ content }}</li>',
              props: ['message'],
              data () {
                return { content: this.message}
              }
          })
    
             var app = new Vue({
              el: '#app',
              data: {
                  message: 'Hello Vue.js!',
                  total: 0
              },
              methods: {
                  incrementTotal: function() {
                      this.total ++
                      this.message = this.total
                  }
             }
          })

Answer 1

传递了，只是因为你绑定的是message，而不是content，所以你的view没更新，你可以直接在组件中{{ message }}，或者你监听一下message这个的变化。
对于你已经动态绑定了message，想不通为什么还要弄个content来转一次，直接用动态绑定的model不行么？

Answer 2

原因：下面这个部分

data() {
  return {content: this.message};
}

其中，content 和 this.messgae 只是简单的值拷贝而已。和下面这份代码并无两样。

data() {
  return {content: 'Hello Vue.js!'};
}

在 message 里面的变化并不会影响到 content。

解决的方法是，没必要用到 content：

template: '<li>{{ message}}</li>',
props: ['message'],
data () {
  return {};
}

Answer 3

官方推荐使用 vuex 保存应用状态，建议去看看。做 Vue 项目的话迟早会用到的。