vue 子组件传值给父组件

clipboard.png

基于element-ui框架。这个选择器很多页面都会用到,于是我把他封装成一个组件方便调用。

子组件:

<template>
    <el-select 
        v-model="value"
        clearable 
        :placeholder="myTip" 
        size="small" 
        @change="changeSelect()">
        <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
    </el-select>
</template>
--------------
props:["type","value"],
data () {
    return {
        options:[],
        val:"",
    }
},
---------------
methods:{
    list:function(){
        if(this.type == '年级'){
            this.load_grade();
        }
    },
    //加载年级
    load_grade:function(){
        this.options = [
            {
                id:'1',
                name:"一年级"
            },
            {
                id:'2',
                name:"二年级"
            },
            {
                id:'3',
                name:"三年级"
            }
        ]
    },
    //改变选中
    changeSelect:function(){
        this.val = this.value;
        this.$emit('input', this.val);
        this.$emit('changeVal', this.val);
    },
}
mounted:function(){
    this.list();
},

父组件:

<cmsSelect 
    v-model="value_grade"
    type="年级" 
    style="width: 140px;" 
    @changeVal="changeVal">
</cmsSelect>

当我改变这个选择器的时候,值拿到了,但是报了一个错

clipboard.png

这是什么原因呢?

阅读 4.3k
2 个回答

首先,这是个警告不是一个错误,警告信息大概意思就是“避免定义名称为value的props,因为他可能被父组件自动重写掉,建议自己定义data或者计算属性”,你定义的"value"可能和vue运行时发生冲突

是你的v-model绑定的value值与propvalue重复定义了。因为prop的值是不能在子组件中被修改的,只能在父组件里通过绑定的值修改。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题