vuejs在子组件中如何调用计算属性?
发布于 3年前 作者 fireyi 1693 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

在vue中子组件获取一个来自父组件中的值并处理,使用ref注册并在父组件中引用$refs获取该组件实例,但是如果需要父组件传递给子组件数据再计算,该如何写呢?代码如下:

export default{
    data(){
        return{
            parentMsg:'hello!'
        }
    },
    components:{
        child:{
            props:['inputMessage'],
            template:'<span>{{inputMessage}}</span>'
        },
        'child-secound':{
            props:['inputMessage'],
            template:'<span>{{lowerCase}}</span>',
            computed:{
                lowerCase(){
                    return this.$refs;
                    // return this.inputMessage.toLowerCase();
                }
            }    
        }
        
    },
}

这里我想用从父组件获取的数据inputMessage在子组件中进行二次处理再输出出来,使用到计算属性,但是这里的return this.$refs却是一个空对象,如何做到子组件在父组件中获取到数据并二次修改再次修改然后输出呢?

3 回复

不就是父级传递props,子组件修改在 props 基础上返回一个新的值吗

官方文档还有具体的例子,如果出问题,就说明传值的时候出错了

回到顶部