怎么在Vue中对v模型组件进行封装

　　介绍

这篇文章将为大家详细讲解有关怎么在Vue中对v模型组件进行封装,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

v模型是Vue的一个语法糖,限制在输入和文本区域等这些表单元素中,官网所给的例子也是仅限于表单组件

Vue.component (& # 39; base-checkbox& # 39;,, { 　　,模型:{ 　　,,道具:& # 39;检查# 39; 　　事件:才能,& # 39;改变# 39; 　　}, 　　,道具:{ 　　检查才能:布尔 　　}, 　　模板:大敌;” 　　& lt;才能输入 　　,,类型=癱heckbox" 　　,,v-bind:检查=癱hecked" 　　,,v:改变=懊涝⒊?& # 39;改变# 39;,,event.target.checked美元)“; 　　祝辞才能; 　　,“ 　　}) 　　& lt; base-checkbox  v模型=發ovingVue"祝辞& lt;/base-checkbox>

现在我们如果想把v模型用到除表单之外的自定义组件中,该怎么使用呢,其实官网所给的例子也比较清晰了,只是如果死脑筋的话,那就限制住了,没错说的就是我”。

 & lt; !——封装的类弹窗组件——比;
　　& lt; template>
　　& lt;才能div>
　　,,,& lt; div  v-show=皏alue"在这是v模型的弹窗组件& lt;/div>
　　& lt;才能/div>
　　& lt;/template>
　　& lt; script>
　　export  default  {
　　道具:{才能
　　,,,的值:{
　　,,,,,类型:布尔,
　　,,,,,默认值:false
　　,,,}
　　,,}
　　}
　　& lt;/script>
　　& lt; !——父组件——比;
　　& lt; template>
　　& lt;才能div>
　　,,,& lt; v-model  v模型=皏alue"祝辞& lt;/v-model>
　　,,,& lt; button  @click=凹壑?true"在点击显示& lt;/button>
　　,,,& lt; button  @click=凹壑?false"在点击消失& lt;/button>
　　& lt;才能/div>
　　& lt;/template>
　　& lt; script>
　　import  VModel 得到“。/Vmodel"
　　export  default  {
　　组件:{VModel},才能
　　数据:才能函数(){
　　,,,return  {
　　,,,,,的值:真的
　　,,,}
　　,,}
　　}
　　& lt;/script>

其实这样父组件这边已经可以通过v模型对显示和消失进行控制了,但是封装组件的,价值这个属性名是不能修改的,必须叫,价值,叫,value1就不可以了

道具:{ 　　,,,value1:{,//失效 　　,,,,,类型:布尔, 　　,,,,,默认值:false 　　,,,} 　　以前,,}

原因,看源码

function  transformModel (选项,,数据:,有的话),{ 　　,const  prop =, (options.model ,,, options.model.prop), | |, & # 39;价值# 39;,//子组件不存在options.model,默认给值 　　,const  event =, (options.model ,,, options.model.event), | |, & # 39;输入# 39;//事件=癷nput" 　　,,(data.attrs  | |, (data.attrs =,{}))(道具),=data.model.value 　　,const 提醒=,data.on  | |, (data.on =, {}) 　　,const  existing =,(事件),//定义 　　,const  callback =, data.model.callback //f () 　　,if  (isDef(现有)),{//错误 　　if 才能; 　　,,Array.isArray(现有) 　　,,,?,existing.indexOf(回调),===1 　　,,,:,existing  !==,回调 　　),{才能 　　(事件)上,,,=,(回调).concat(现有) 　　,,} 　　,}else  { 　　在(事件),才能=,callback //把回调赋值给监听的函数 　　,} 　　}

,我们就可以加上模型属性,进行代码修改

& lt; template> 　　& lt;才能div> 　　,,,& lt; div  v-show=皏alue"在这是v模型的弹窗组件& lt;/div> 　　,,,& lt; div  @click=癱ancelClick"祝辞组件内部调用& lt;/div> 　　& lt;才能/div> 　　& lt;/template> 　　& lt; script> 　　export  default  { 　　道具:{才能 　　,,,的值:{ 　　,,,,,类型:布尔, 　　,,,,,默认值:false 　　,,,}, 　　,,,模型:{ 　　,,,,,支持:“value" 　　,,,,,事件:& # 39;改变# 39; 　　,,,} 　　,,}, 　　方法:{才能 　　,,,cancelClick:函数(){ 　　,,,,,//内部调用这个方法可以进行控制 　　,,,,,,美元发出(“change",假) 　　,,,} 　　,,} 　　} 　　& lt;/script>

当然我们也可以通过模型属性,对价值这个属性名进行修改,也是实现同样的效果

bool: { 　　,,,类型:布尔, 　　,,,默认值:false 　　,,}, 　　模型:{ 　　道具:“bool"才能, 　　事件:& # 39;才能改变# 39; 　　}

注意如果灭有加模型属性的话,对道具的价值属性名修改的话,是没效果的,默认的v模型的事件默认修改的还是价值

const  prop =, (options.model ,,, options.model.prop), | |, & # 39;价值# 39;,//子组件不存在options.model,默认给值 　　null

怎么在Vue中对v模型组件进行封装