H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】vue中父组件传入子组件的值,在子组件中不会随着父组件的值变化?为什么?

看一个小需求:

clipboard.png

看一段代码:

// 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组件中的值没有变化,为什么呢?

回答:

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

回答:

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

回答:

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

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

或者

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

回答:

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


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

本文地址:H5W3 » 【Web前端问题】vue中父组件传入子组件的值,在子组件中不会随着父组件的值变化?为什么?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址