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

问题描述

问 题

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

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

  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
                  }
             }
          })

解决方案

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

这篇关于javascript - Vuejs父级数据变化了，怎么同步到子组件中啊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！