为什么监听不到父组件传过来值的变化？

Question

我子组件created已经获取到传过的值了，但是我数据变化子组件watch监听不到，请看看我这什么毛病谢谢啦

父组件

<template>
    <div>
        <div class="bar-1">
                <el-radio-group v-model="radio">
                    <el-radio-button label="DAY">日</el-radio-button>
                    <el-radio-button label="MONTH">月</el-radio-button>
                    <el-radio-button label="YEAR">年</el-radio-button>
                </el-radio-group>
            
                <barchart :childmsg="radio"></barchart>
        </div>

    </div>
</template>
 
<script>

export default {
    data() {
        return {
            radio: 'DAY',
        };
    }
};
</script>

子组件

export default {
    props: ["childmsg"],
    watch: {
        childmsg: {
                handler(newValue, oldValue) {
                    console.log(newValue);
                }
            }
    },
    created() {
        console.log(this.childmsg);//这里已经获取了父组件传过来的值
    },
}

Answer 1

你父组件绑定的是radio1

Answer 2

添加上immediate:true试试，我这边测试可行

export default {
    props: ["childmsg"],
    watch: {
        childmsg: {
                handler(newValue, oldValue) {
                    console.log(newValue);
                },
                immediate: true
            }
    },
    created() {
        console.log(this.childmsg);//这里已经获取了父组件传过来的值
    },
}

Answer 3

在父组件里注册子组件了么？你的代码我跑了一下，是可以监听到 radio 的变化的

components: {
    barchart
},

Answer 4

问题出在父组件的radio上，
<el-radio-button :label="DAY">日</el-radio-button>
<el-radio-button :label="MONTH">月</el-radio-button>
<el-radio-button :label="YEAR">年</el-radio-button>
如果是变量记得label前面加上冒号: