场景描述
我们在一个系统中，会出现这样的情况，
有一个联系人的下拉框，这个下拉框中的数据是从服务端获取的。
在很多页面都需要使用这个联系人(下拉框)。
我们通常是这样做的：
写一个下拉框组件然后调用接口。
这样不仅会造成代码冗余，而且不利于后期的维护。
比如说：如果有一天这个要发生变化，如果整个系统中有几十处。
难道我们要更改几十处？不会吧。这样好难受呀。
有的小伙伴说：这个还不简单：封装成为一个组件呀。
封装成为组件
concatPersonSelect.vue
<template>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="联系人">
<el-select v-model="form.person" placeholder="请选择活动区域">
<el-option v-for="(item,index) in listAtt" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
listAtt:[],
form: {
person: '',
}
}
},
created() {
this.getUserList()
},
methods: {
// 模拟接口
getUserList(){
setTimeout(()=>{
this.listAtt = [{
name:'张三1',id:1
},{
name:'张三2',id:2
},{
name:'张三3',id:3
},{
name:'张三4',id:4
}]
},1600)
}
},
}
</script>
页面使用
<template>
<div>
<h2>自定义组件也可以使用v-model</h2>
<concatPersonSelect></concatPersonSelect>
</div>
</template>
<script>
export default {
components:{
concatPersonSelect
},
data(){
return{
}
}
}
</script>
现在遇见的问题
是的，现在我们是把它封装成为了一个组件。
但是如果获取组件中的值呢？
这........,思考一会。
机智的小伙伴说:子组件提供一个方法，父组件通过ref的方式去调用。
那如果要赋值呢？子组件也提供一个方法，父组件去使用。
这样就可以获取值，赋值了。（耶，简直是一个天才）
这样虽然可以，但是真的优点繁琐，还有其他好的方法吗？
我们可以使用v-model,是的，我们给自己封装的组件使用v-model
组件中使用v-model的想法
我们给下拉框绑定一个 change 事件，这样值发生变化后。
通过 this.$emit 去更新。
与此同时，v-model中的值是 data中的 userValue 值。
userValue 中的值是从props中来的。
然后使用 model 中的 event 属性与 emit 事件保持一致
改造组件,组件可以使用 v-model
<template>
<el-form ref="form" label-width="80px">
<el-form-item label="联系人">
<el-select @change="changeGetValue" v-model="userValue" placeholder="请选择活动区域">
<el-option v-for="(item,index) in listAtt" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</el-form>
</template>
<script>
export default {
model: {
event: 'input-change', // 这个事件与下面的emit事件与之对应
prop: 'propsInfoValue' //
},
props:{
// 父组件传递的值，用于数据回填
propsInfoValue:{
type:String,
default:()=>{
return ''
}
}
},
data() {
return {
listAtt:[],
userValue: this.propsInfoValue
}
},
created() {
this.getUserList()
},
methods: {
// 模拟接口
getUserList(){
setTimeout(()=>{
this.listAtt = [{
name:'张三1',id:'1'
},{
name:'张三2',id:'2'
},{
name:'张三3',id:'3'
},{
name:'张三4',id:'4'
}]
},1600)
},
// 值发生变化会被触发,就去更新
changeGetValue(){
this.$emit('input-change', this.userValue)
}
}
}
</script>
页面就可以使用 v-model 了
<template>
<div>
<h2>自定义组件也可以使用v-model</h2>
<concatPersonSelect v-model="obj.name" ></concatPersonSelect>
<el-button @click="getHandler"> 获取值 </el-button>
</div>
</template>
import concatPersonSelect from '../components/concatPersonSelect/concatPersonSelect.vue'
export default {
components:{
concatPersonSelect
},
data(){
return{
obj:{
name:''
}
}
},
methods: {
getHandler(){
console.log('获取的值', this.obj)
}
}
}
如何有必填参数怎么搞？
我们都知道，如果某一个参数是必填的话。
在elementui中的form表单中。
需要同时满足两个条件，那就是：
rules 属性传入约定的验证规则，
并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
因此，子组件中的 el-form-item中应该有一个 prop属性，
并且这个属性的值与 rules属性中的规则字段相同就行。
我们打算在子组件中使用
v-bind="$attrs" 和 inheritAttrs: false,
这样页面中的参数可以直接进行传递
更新优化子组件
<template>
<div>
<el-form-item label="联系人" v-bind="$attrs">
<el-select @change="changeGetValue" v-model="userValue" placeholder="请选择联系人">
<el-option v-for="(item,index) in listAtt" :key="index" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
</div>
</template>
<script>
export default {
model: {
event: 'input-change', // 这个事件与下面的emit事件与之对应
prop: 'propsInfoValue' //
},
props:{
// 父组件传递的值，用于数据回填
propsInfoValue:{
type:String,
default:()=>{
return ''
}
}
},
inheritAttrs: false, //不让属性直接渲染在根节点上
data() {
return {
listAtt:[],
userValue: this.propsInfoValue
}
},
created() {
this.getUserList()
},
methods: {
// 模拟接口
getUserList(){
setTimeout(()=>{
this.listAtt = [{
name:'张三1',id:'1'
},{
name:'张三2',id:'2'
},{
name:'张三3',id:'3'
},{
name:'张三4',id:'4'
}]
},1600)
},
// 值发生变化会被触发,就去更新
changeGetValue(){
this.$emit('input-change', this.userValue)
}
},
}
</script>
页面使用
<template>
<div>
<h2>自定义组件也可以使用v-model</h2>
<el-form :rules="rules" :model="ruleForm" ref="form" label-width="80px">
<el-form-item label="活动名称" prop="activeName">
<el-input v-model="ruleForm.activeName"></el-input>
</el-form-item>
<!-- prop中的值必须与验证规则中的字段保持一致，否者无法验证 -->
<concatPersonSelect prop="personName" v-model="ruleForm.personName" >
</concatPersonSelect>
<el-button @click="getHandler"> 获取值 </el-button>
</el-form>
</div>
</template>
<script>
export default {
components:{
concatPersonSelect
},
data(){
return{
// 表单中的字段
ruleForm:{
activeName:'',
personName:''
},
// 验证规则以及提示语
rules: {
activeName: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
],
personName: [
{ required: true, message: '请选联系人', trigger: 'change' }
]
}
}
},
methods: {
getHandler(){
console.log('获取的值', this.ruleForm)
this.$refs['form'].validate((valid) => {
// 验证规则成功
console.log(1,valid)
})
}
}
}
</script>
