vue中父组件传入子组件的值，在子组件中不会随着父组件的值变化？为什么？

Question

看一个小需求：

看一段代码：

// h1组件
Vue.component("H",{
    template:`
    <h1>{{n}}</h1>
    `,
    props:["t"],
    data:function(){
        return {
            n:this.t
        }
    }
})

//加法组件
Vue.component("Add",{
    template:`
    <button @click="addson">+</button>
    `,
    methods: {
        addson(){
            this.$emit("addbind");
        }
    }
})
//减法组件
Vue.component("Sub",{
    template:`
    <button @click="subson">-</button>
    `,
    methods: {
        subson(){
            this.$emit("subbind");
        }
    }
})


new Vue({
    template:`
    <div>
        <H v-bind:t="n"/>
        <Add v-on:addbind="add"/>
        <Sub v-on:subbind="sub"/>
    </div>
    `,
    el:"#app",
    data:{
        n:0
    },
    methods: {
        add(){
            this.n++
        },
        sub(){
            this.n--
        }
    }
})

当点击加号或者减号时，父组件中的n值会发生变化，但是H组件中的值没有变化，为什么呢？

Answer 1

你的子组件里用了n变量去接收与父组件通信的t，只会在第一次初始化子组件的时候拿到值，如果你直接用t就可以观察到变化了，想要继续使用n，你需要动态监听t的变化并给n赋值。

Answer 2

直接使用props的初始值t，或者对n使用computed/watch

Answer 3

因为你代码中子组件的n的值是通过data得到的,data中的值是不变的，所以n的值不会随着t的值进行改变，你可以使用computed或者直接引用t

computed: {
  n() {
   return this.t;
  }
}

或者

template:`
    <h1>{{t}}</h1>
    `

Answer 4

楼主的代码没有问题，H 组件中的值会随着父组件的 n 值变化而变化。可以再检查一下。

---

额，楼主的代码在我看到题目的时候确实是没有问题的，我也验证过了，不用踩我了哈哈。