华山资源网

Vue自定义组件双向绑定实现原理及方法详解
网络编程 2024/11/20 佚名
3 1

前言

无论在任何的语言或框架中，我们都提倡代码的复用性。对于Vue来说也是如此，相同的代码逻辑会被封装成组件，除了复用之外，更重要的是统一管理提高开发效率。我真就接手过一个项目，多个页面都会用到的列表，没有去封装列表组件，只要有一点改动，每个页面都得加上。很肯定的说，没有用组件化开发的Vue项目是没有灵魂的。所以如何封装一个优雅且复用性高的组件成为我们必需的技能。

Tab自定义组件

首先来看一个Tab组件的实现，看看它存在什么问题，哪里可以改进？

效果

Vue自定义组件双向绑定实现原理及方法详解

组件

<template>
 <div class="tabs">
  <div 
   class="tab-item" 
   :class="{'tab--active':item===activeName}"
   v-for="(item,index) in tabs" 
   :key="index" 
   @click="tabChange(item)">
   {{item}}
  </div>
 </div>
</template>

<script>
export default {
 props:{
  tabs:{
   type: Array,
   default: ()=> []
  },
  activeName:{
   type: String,
   default: ''
  }
 },
 methods:{
  tabChange(item){
   this.$emit('tabChange',item)
  }
 },
}
</script>

使用

<template>
 <div>
  <Tabs :tabs="tabs" :activeName="activeName" @tabChange="tabChange" />
 </div>
</template>

<script>
import Tabs from '../components/Tabs'
export default {
 components:{
  Tabs
 },
 data(){
  return{
   tabs:['黄金体验','败者食尘','绯红之王','白金之星','波纹疾走'],
   activeName: '黄金体验'
  }
 },
 methods:{
  tabChange(item){
   this.activeName = item
  }
 },
}
</script>

这个组件最大的问题就是，activeName 需要使用者额外通过事件来手动更新，假如有另一个使用者接手，在不知道这种情况下使用，会出现tab没有切换的情况。然后要去看组件内部实现，再回来修改代码，很显然这样的组件是失败的。本着所有的脏活累活都由组件实现的原则，理想的状态应该是使用者不需要管理 activeName，而是由组件内部去更新。

如何改进修改prop"htmlcode"> 

tabChange(item){
 this.activeName = item
 this.$emit('tabChange',item)
}

使用时，控制台抛出警告

Vue自定义组件双向绑定实现原理及方法详解

由于prop是单向数据流，父级prop的更新会向下流动到子组件中，相反的在子组件内部直接更新状态，会导致数据的流向不明确。例如，在父组件中有多个子组件依赖同一个属性，其中一个子组件更新该属性，会引发其余子组件发生改变，发生问题时不容易被找到，因此Vue不推荐我们这样做。另外，在父组件发生更新时，子组件的prop会被刷新为最新的值。

单向数据流: https://cn.vuejs.org/v2/guide/components-props.html#%E5%8D%95%E5%90%91%E6%95%B0%E6%8D%AE%E6%B5%81

正解：model选项改进组件

组件model选项

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

model: https://cn.vuejs.org/v2/api/

在model选项里，我们可以绑定一个属性，并为其添加事件，只需在调用方法时传入值即可更新属性。

<script>
export default {
 model:{
  prop: 'activeName',
  event: 'update'
 },
 props:{
  tabs:{
   type: Array,
   default: ()=> []
  },
  activeName:{
   type: String,
   default: ''
  }
 },
 methods:{
  tabChange(item){
   this.$emit('update',item) // 这里更新activeName
   this.$emit('tabChange',item)
  }
 }
}
</script>

注意你仍然需要在组件的 props 选项里声明 prop。

使用

使用组件双向绑定后，属性在组件内部被更新时，父组件的 activeName 也会随之更新，这样使用者可以很明确的知道数据可能会被修改。

<Tabs :tabs="tabs" v-model="activeName" />

总结

使用组件的model选项实现自定义组件双向绑定，在组件内部通过事件更新属性值，这样的自定义组件使用起来更优雅。其实通过model选项的方式去修改父级属性，我认为有点违反了单向数据流的原则。本来单向数据流是不允许子级修改父级属性的，只是使用v-model的语法糖，看起来会让数据流向显得更加明确，恰好弥补这个缺点。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com