vue 子组件传值给父组件

Question

基于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>

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

这是什么原因呢？

Answer 1

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

Answer 2

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