Question

尝试从父级组件更改为父级的选择选项值。这是结构。

父母

<child-comp :date="date" />

<select v-model="date">
    <option value="2019-09">2019年9月</option>
    <option value="2019-10">2019年10月</option>
    <option value="2019-11">2019年11月</option>
    <option value="2019-12">2019年12月</option>
    <option value="2020-20">2020年01月</option>
</select>

data(){
    return {
        date: "",
    };
},

那里一切都很好。更改val，并更新数据道具。但是在孩子里面。

孩子

props: {
    date: String,
},
watch: { 
    date(value){
        console.log(value)
    }
},
computed: {
    dateUpdate(){

        console.log(this.date)

        var dt = new Date(),
            ldt = new Date(dt.getFullYear(), dt.getMonth() + 1, 0),
            y = ldt.getFullYear(),
            m = ("00" + (ldt.getMonth() + 1)).slice(-2),
            d = ("00" + ldt.getDate()).slice(-2),
            result = y + "年" + m + "月" + d + "日";

        return result;
    },
}

我想听日期道具，在dateUpdate()内尝试使用watch:的情况仍然无法console.log所做的更改...我缺少什么？

Answer 1

您应注意的dateUpdate计算属性值，而不是date道具。目前，您没有更改prop date的值，只是在子组件中使用了date prop，然后在您使用的dateUpdate计算属性内date返回不同的值。此不同值的名称为dateUpdate，如果您想查看该值的变化，则应将手表放在此计算属性上。

孩子

props: {
    date: String,
},
watch: { 
    dateUpdate(value){
        console.log(value)
    }
},
computed: {
    dateUpdate(){
        ...
    },
}```

侦听子组件vue.js中的select选项更改

1 个答案: