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事件向父组件传值就可以来