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

前言

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

Tab自定义组件

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

效果

组件

<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?

可能有人会想到，既然要由内部管理，那在组件内部修改prop的值是不是就可以了？来看下这样的做法是否可行
修改组件tabChange方法，在点击时更新prop的值

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

使用时，控制台抛出警告

由于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的语法糖，看起来会让数据流向显得更加明确，恰好弥补这个缺点。

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

赞 (0)

相关推荐

  • VUE 自定义组件模板的方法详解

    VUE 自定义组件模板的方法详解

    本文实例讲述了VUE 自定义组件模板的方法.分享给大家供大家参考,具体如下: 先说下需求吧,因为客户的用户群比较大,如果需求变动,频繁更新版本就需要重新开发和重新发布,影响用户的体验,考虑到这一层就想到,页面展示效果做动态可配,需求更新时,重新配置一份模板录入到数据库,然后根据用户选择的模板进行展示. 关于页面展示做的动态可配,我是参考vue的Component组件方式,开始时可能会遇到组件定义后不能加载的情况,并在控制台如下错误:You are using the runtime-only b

  • 使用Vue 自定义文件选择器组件的实例代码

    本文 GitHub  https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. 文件选择元素是web上最难看的 input 类型之一.它们在每个浏览器中实现的方式不同,而且通常非常难看.这里有一个解决办法,就是把它封装成一个组件. 安装 如果你尚未设置项目,可以使用 vue-cli 的 webpack-simple 模板启动一个新项目. $ npm

  • vue.js自定义组件实现v-model双向数据绑定的示例代码

    我们都清楚v-model其实就是vue的一个语法糖,用于在表单控件或者组件上创建双向绑定. //表单控件上使用v-model <template> <input type="text" v-model="name" /> <input type="checkbox" v-model="checked"/> <!--上面的input和下面的input实现的效果是一样的--> <

  • vue 自定义组件的写法与用法详解

    三个技能,父组件 -> 子组件传值(props).子组件 -> 父组件传值(emit用来使这个独立的组件通过一些逻辑来融入其他组件中.举个具体点的例子,假如你要做一辆车,车轮是要封装的一个独立组件,props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹,图案等:而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来. (1)使用props可以实现父子组件之间的传值 (2)使用this.$emit()可是实现子组件调用父组件的方法 一.在commponents文

  • vue中的v-model原理,与组件自定义v-model详解

    VUE中的v-model可以实现双向绑定,但是原理是什么呢?往下看看吧 根据官方文档的解释,v-model其实是一个语法糖,它会自动的在元素或者组件上面解析为 :value="" 和 @input="", 就像下面这样 // 标准写法 <input v-model="name"> // 等价于 <input :value="name" @input="name = $event.target.val

  • vue swipe自定义组件实现轮播效果

    vue swipe自定义组件实现轮播效果

    本文实例为大家分享了vue swipe自定义组件实现轮播效果的具体代码,供大家参考,具体内容如下 <template> <layout-div :style="getStyle" class="over-h posi-r"> <layout-div :style="getChildStyle" class="flex" @load="loadHandle"> <sl

  • 解决vue自定义全局消息框组件问题

    1.发现问题 在进行移动端适配的时候,为了在各个型号的设备上能够更好的提现结构排版,决定采用rem布局.采用rem布局的时候html的字体font-size是有一个标准的.我这边用的是750px的设计稿,就采用1rem = 100px. 在使用的过程中会用到一些第三方UI组件,而第三方UI组件是以px单位为标准的. 使用时发现:本来应该细长的提示语句变得很大! 最后发现可能是因为这个icon是继承了html设定的font-size,尝试加一些样式上去还是无效.(如果rem布局上有直接更改第三方组

  • Vue的自定义组件不能使用click方法的解决

    先贴代码 var myButton = Vue.extend({//设置标签 props: ['names', 'item2'],//names为按钮名,item2为数据 template: '<span><span v-for="obj in item2" v-if="obj.name==names" v-html="obj.code"></span></span>' }) Vue.compone

  • Vue自定义组件的四种方式示例详解

    四种组件定义方式都存在以下共性(血泪史) 规则: 1.组件只能有一个根标签 2.记住两个词全局和局部 3.组件名称命名中'-小写字母'相当于大写英文字母(hello-com 相当于 helloCom) 而对于在HTML中自定义组件的时候有4种写法,不过也只是殊途同归,都是用template属性对应的只有一个根标签的HTML代码. 1.全局组件 定义方式示例: Vue.component("hello-component",{ props:["message"], t

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

    前言 无论在任何的语言或框架中,我们都提倡代码的复用性.对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率.我真就接手过一个项目,多个页面都会用到的列表,没有去封装列表组件,只要有一点改动,每个页面都得加上.很肯定的说,没有用组件化开发的Vue项目是没有灵魂的.所以如何封装一个优雅且复用性高的组件成为我们必需的技能. Tab自定义组件 首先来看一个Tab组件的实现,看看它存在什么问题,哪里可以改进? 效果 组件 <template> <di

  • Vue双向绑定实现原理与方法详解

    本文实例讲述了Vue双向绑定实现原理与方法.分享给大家供大家参考,具体如下: 昨天接到一个电话面试,上来第一个问题就是Vue双向绑定的原理.当时我并不知道如何监听数据层到视图层的变化,于是没答上来,挂电话后,我赶忙查了下资料,主要思路有如下三种. 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元素都将"订阅"一个发布者对象.任何时候如果JavaScript对象或者一个HTML输入

  • Vue父子组件双向绑定传值的实现方法

    父子组件之间的双向绑定非常简单,但是很多人因为是从Vue 2+开始使用的,可能不知道如何双向绑定,当然最简单的双向绑定(单文件中)就是表单元素的 v-model 了,例如 <input type="text" /> 它会响应表单元素的 value 属性,当输入框文本改变时,会将 value 值传给 v-model 所绑定的变量,如果同时设置 v-model 和 value , value 属性无效. 父子组件的自定义双向 v-model 当若干dom封装成组件时,在父组件中

  • vue iview组件表格 render函数的使用方法详解

    如果要在标签中加入属性,例如img 中src属性   a标签中href属性  此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'center', render: function (h, params) { return h('div', [ h('Button', { props: { type: 'primary', size: 'small' }, style: { marginRight: '8px' }, on

  • vue中自定义组件双向绑定的三种方法总结

    vue中自定义组件双向绑定的三种方法总结

    目录 1. 父组件使用v-model绑定 2. 父组件使用v-model绑定 3. 父组件使用:name.sync绑定 官方文档地址 1. 父组件使用v-model绑定 子组件props接收参数,$emit触发input事件传值 2. 父组件使用v-model绑定 子组件props接收参数,参数名称可以自定义,$emit触发方法传值,方法名称可以 自定义,通过model属性将prop参数名和事件名进行关联 3. 父组件使用:name.sync绑定 子组件props接收参数名称为name,$emi

  • vue中view-model双向绑定基础原理解析

    利用Object.defineProperty进行数据劫持 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue

  • vue修饰符v-model及.sync原理及区别详解

    目录 v-model的原理 .sync的原理 v-model和.sync修饰符的区别 总结作用场景: v-model的原理 v-model的本质,其实就是:value和@input事件的语法糖 <!--v-model写法--> <my-component type="text" v-model="num"> <!--展开语法糖后的写法--> <my-component type="text" :value

  • 无UI 组件Headless框架逻辑原理用法示例详解

    目录 概述 精读 总结 概述 Headless 组件即无 UI 组件,框架仅提供逻辑,UI 交给业务实现.这样带来的好处是业务有极大的 UI 自定义空间,而对框架来说,只考虑逻辑可以让自己更轻松的覆盖更多场景,满足更多开发者不同的诉求. 我们以 headlessui-tabs 为例看看它的用法,并读一读 源码. headless tabs 最简单的用法如下: import { Tab } from "@headlessui/react"; function MyTabs() { ret

  • Vue利用openlayers实现点击弹窗的方法详解

    目录 解释 编写弹窗 引入 openlayer使用弹窗组件 点击事件 这个写的稍微简单一点就行了,其实呢,这个不是很难,主要是知道原理就可以了. 我想实现的内容是什么意思呢?就是说页面上有很多坐标点,点击坐标点的时候在相应的位置弹出一个框,然后框里显示出这个坐标点的相关数据. 解释 这个内容的其实就是添加一个弹窗图层,然后在点击的时候让他显示出来罢了. 编写弹窗 首先一点,我们这个弹窗需要自己写一下,具体的样式,展示的内容之类的,所以说写一个弹窗组件,然后在openlayer文件中引用加载. 比

  • 对Vue table 动态表格td可编辑的方法详解

    项目中需求用到可编辑表格 下图这种 ↓ element UI 组件table表格中 增加template 模版 翻入input 根据业务逻辑增加全局变量 isEdit 是否变化. <el-table-column label="名称" width="140"> <template scope="scope"> <el-input v-if="scope.row.isEdit && scope

随机推荐