vue自定义组件封装v-model数据双向绑定

虽然现在有很多优秀的vue ui组件框架，但是很多功能还是没有办法达到定制化，所以我们需要自己封装一个符合自己的组件

话不多说 贴代码

子组件

<template>
<div v-bind:class="showcode?'errorymform':'ymform'">
<Row >
<i-Col span="2">
<div>
<p><span v-if="ytips.tyipscode==true" style="color: red;line-height: 30px;">*&nbsp;&nbsp;</span>{{ytips.tips}}:</p>


</div>
</i-Col>
<i-Col span="22">
<div>
<input v-model="text" v-bind:placeholder="ytips.inputtips" @blur="changeinput()"  v-bind:class="showcode?'errorinput':'yminput'" style="width: 500px" />

</div>
<div v-if="showcode">{{ytips.errortips}}</div>
</i-Col>
</Row>

</div>
</template>

<script>
export default {
props: ['ytips'],
data() {
return {
text: '',
showcode: false
}
},
methods: {
changeinput() {
if (this.ytips.tyipscode==true){
if (this.text == '') {
this.showcode = true
} else {
this.showcode = false
this.$emit('input', this.text)
}
}else{
this.$emit('input', this.text)
}


}
}
}
</script>

<style scoped>
input{
outline: none;
}

.title p {
line-height: 32px;
font-weight: bold;
text-align: center;
}

.forminout {
padding-left: 15px;
}
.errorinput{
border: red solid 1px;
border-radius: 5px;
line-height: 32px;
}
.yminput{
border: #5cadff solid 1px;
border-radius: 5px;
line-height: 32px;
}
.ymform{
padding-bottom: 30px;
}
.errorymform{
padding-bottom: 0px;
}
.errortips{
line-height: 30px;
padding-left: 15px;
color: red;
}
</style>

父组件调用

<template>
<div>
<div>
<ymjy-input v-model="ymdata.title.value" :ytips="ymdata.title"></ymjy-input>
<ymjy-input v-model="ymdata.subtitle.value" :ytips="ymdata.subtitle"></ymjy-input>
<ymjy-input v-model="ymdata.link.value" :ytips="ymdata.link"></ymjy-input>
<ymjy-input v-model="ymdata.dowlink.value" :ytips="ymdata.dowlink"></ymjy-input>
<ymjy-input v-model="ymdata.tag.value" :ytips="ymdata.tag"></ymjy-input>
<Row>
<i-Col span="2">
<p style="text-align: center;font-weight: bold;">类型:</p>
</i-Col>
<i-Col span="8">
<Select v-model="model1" style="width:200px;margin-left: 15px;padding-bottom: 30px;">
<Option v-for="item in typeslist" :value="item.Typesname" :key="item.Id">{{ item.Typesname }}</Option>
</Select>
</i-Col>
</Row>
<Row>
<i-Col span="2">
<p style="text-align: center;font-weight: bold;">缩略图:</p>
</i-Col>
<i-Col span="20">
<Upload action="//jsonplaceholder.typicode.com/posts/">
<div style="margin-left: 15px;">
<img :src="upimgurl" />
</div>
</Upload>

</i-Col>
</Row>
<br />
<Row>
<i-Col span="2">
<p style="text-align: center;font-weight: bold;">详情:</p>
</i-Col>
<i-Col span="20">
<div id="editor" ref="editor" style="text-align:left"></div>
</i-Col>
</Row>
<Row>
<i-Col span="20" offset='2'>
<Button type="success" @click="datasubmit">提交</Button>
</i-Col>
</Row>
</div>
</div>
</template>

<script>
import {
Gettypes,Adddata
} from "@/request/api.js"
import YmjyInput from '@/components/YmjyInput.vue'
import E from 'wangeditor'
export default {
components: {
YmjyInput
},
data() {
return {
editorContent: '',
model1: '',
typeslist: [],
ymdata: {
title: {
value: '',
tips: '标题',
errortips: '标题不能为空',
inputtips: '请输入标题',
tyipscode: true
},
subtitle: {
value: '',
tips: '副标题',
errortips: '副标题不能为空',
inputtips: '请输入副标题',
tyipscode: true
},
link: {
value: '',
tips: '预览链接',
inputtips: '请输入预览链接',
tyipscode: false
},
dowlink: {
value: '',
tips: '下载链接',
errortips: '下载链接不能为空',
inputtips: '请输入下载链接',
tyipscode: true
},
tag: {
value: '',
tips: '标签',
errortips: '标签不能为空',
inputtips: '请输入标签',
tyipscode: true
}
},
upimgurl: 'http://cdn.x-x-mo.com/upimglogo.jpeg',
gettypes: function() {
Gettypes().then(res => {
window.console.log(res)
if (res.Code == 1) {
this.typeslist = res.Data
} else {
alert('类型列表请求失败')
}
})
}

}

},
mounted() {
var editor = new E(this.$refs.editor)
editor.customConfig.onchange = (html) => {
this.editorContent = html
}
editor.customConfig.zIndex = 1;
editor.customConfig.uploadImgServer = '/upload';
editor.create()

this.gettypes();
},
methods: {
getContent: function() {
alert(this.editorContent)
},
datasubmit() {
var adddata = this.ymdata
var postdata={
name:'测试name',
tag: [{
value: 'fdsfsd',
tips: '标签',
errortips: '标签不能为空',
inputtips: '请输入标签',
tyipscode: true
},
{
value: 'fdsfsd',
tips: '标签',
errortips: '标签不能为空',
inputtips: '请输入标签',
tyipscode: true
}]
}
Adddata(postdata).then(res=>{
window.console.log(res)
})
if (adddata.title.value == '' || adddata.subtitle.value == '' || adddata.dowlink.value == '' || adddata.tag.vaule ==
'') {
this.$Modal.error({
title: "添加失败！",
content: "信息填写不完整"
});
}
}
}
}
</script>

<style scoped>
.upimg img {
width: 500px;
height: 400px;
}

#editor {
padding-left: 15px;
}

.submit {
padding-left: 15px;
margin-top: 20px;

}
</style>