vue 使用v-model绑定自定义子组件

v-model大部分解释是语法糖，其实就是在父组件中定义一个变量，通过v-model绑定变量传入子组件中，并在子组件改变这个值时，父组件能拿到最新到数据

下面具体说说如何通过v-model绑定自定义组件，算了，也没什么说的，也不知道咋说，直接看代码吧！

首先我们有一个父组件

<template>
    <div>
        <el-button @click="dialogVisible_new = true">新增参数</el-button>
        <el-dialog
                title="新增参数"
                :visible.sync="dialogVisible_new"
                size="tiny"
        >
            <newParamModel ref="new" v-model="newParamData"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_new = false">取 消</el-button>
                <el-button type="primary" @click="handleNewParam">新 增</el-button>
              </span>
        </el-dialog>
    </div>
</template>
<script>
    import newParamModel from "./newParamModel"
  export default {
    data() {
      return {
        newParamData:{
          name:"",
          required:false,
          explain:""
        },
        dialogVisible_new:false,
      }
    },
    components:{
      newParamModel
    },
    methods:{
      handleNewParam(){
        console.log(this.newParamData)
      }
    }
  }
</script>

功能是点击按钮弹出对话框，对话框是一个表单子组件，这里绑定了变量newParamData，在子组件中用value来取model值，

下面是子组件newParamModel的代码

<template>
    <div>
        <el-form :model="value" label-width="120px" ref="newParamForm" >
            <el-form-item label="参数名称：" prop="name">
                <el-input v-model="value.name" placeholder="请输入参数名称"></el-input>
            </el-form-item>
            <el-form-item label="是否必填：" prop="required">
                <el-switch
                        v-model="value.required"
                        on-text="是"
                        off-text="否">
                </el-switch>
            </el-form-item>
            <el-form-item label="参数说明：" prop="explain">
                <el-input v-model="value.explain"
                          placeholder="请输入参数说明"
                          type="textarea"
                          :rows="3"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
  export default {
    props:["value"]
  }
</script>

就这样，父组件可以直接取到子组件中表单值到变化

也可以使用input事件向父组件传值，

this.$emit('input',data)

有的时候可能value会报错，vue不允许数据双向绑定，这时候在子组件中定义一个新的变量代替value，最后通过input事件向父组件传值就可以来