Vue快速上门(3)-组件与复用

Vue快速上门(3)-组件与复用插图1

VUE家族系列:

01、component组件

1.1、component基础知识

组件是可以复用的Vue模块,是一个独立的,有自己的视图、样式CSS、ViewMoel业务逻辑,结构的完整模块。当成自定义元素,可以在任意Vue中、模板、其他组件中使用。一个复杂的页面、系统可以拆分为多个组件,独立开发和维护,可复用、更清晰。

Vue快速上门(3)-组件与复用插图2

🔸注册组件Vue.component( id, [definition] )注册全局组件,id为组件的名称,也作为元素名,参数和Vue参数选项对象基本一致。

  • data 必须是函数:通过函数返回对象,避免不同组件实例共享data数据。
  • template 模板,字符串模板,或者选择器,不能用真实Dom元素。
  • 必须有根元素:组件的模板必须有一个有效的根元素。

🔸props 参数:通过props定义组件参数(Array | Object ),参数都会作为组件元素的attribute特性使用,通过vm.$props获取组件参数。

🔸自定义事件:在子组件中,申明并触发自定义事件 $emit( event-name, […args] ),通过vm.$listeners 获取组件的所有监听事件。(emit /iˈmɪt/ 发射,发出 )

  • 响应事件(父组件):v-on:event-name,这里的处理函数建议只绑定函数名,便于接收参数。
  • 修饰符.native 绑定组件根元素的原生事件,v-on:change.native="func"
  • 绑定事件监听器,在组件内特定元素上绑定所有监听事件:v-on="$listeners"vm.$listeners可获取组件上的所有监听事件。

🔸插槽,在组件中设定一个插槽,来接收组件元素的标签内的内容,通过vm.$slots 获取组件的插槽。

` //通过模板字符的方式实现多行文本,IE是不支持的。
});
let app9 = new Vue({
el: "#app9",
data: {
users: [
{ name: "张三", age: 14, summary: "垂死病中惊坐起,赶快下楼做核酸" },
{ name: "李四", age: 30, summary: "仰天大笑出门去,下楼排队做核酸" }]
}
})

Vue快速上门(3)-组件与复用插图3

📢注意组件命名小写+连字符(kebab-case),包括组件名称(作为自定元素标签)、组件参数prop(作为自定义元素的 attribute),以及自定义事件名。

  • 小写遵循W3C规范,连字符避免和HTML冲突(包括以后新的HTML标签名)。
  • HTML 中的 attribute 名是大小写不敏感的,浏览器会把所有大写字符解释为小写字符。
    ⚠️ 如果使用字符模板,就不归浏览器管了,就没有命名的限制问题了!

1.2、注册组件

  • 全局注册Vue.component( id, {选项}),全局组件,任何地方都可以使用。
  • 局部注册components:{id:{选型}}选项注册组件,只能在当前注册的Vue环境内使用,不可继承。
  • 扩展Vue类Vue.extend({选项}),创建一个Vue的扩展类,通过new()创建组件实例,也是一种组件复用方式。
性别({{uinfo.sex}}):

Vue快速上门(3)-组件与复用插图4

1.3、is 动态组件

通过is特性设置(或v-bind:is绑定)组件名称,动态的申明一个组件。

组件使用申明方式:

  • :常规自定义元素方式申明。
  • :component组件元素申明,通过is设置组件名称,:is就可以动态绑定组件了。
  • :其他HTML元素+is申明组件,该元素会被组件内容替换掉。这主要是为了解决有些HTML元素中只能包含特定的子元素,如

      
          
      
      

      🔸keep-alive 缓存组件:用包裹动态组件,配合组件特性:is使用,用来缓存失活的动态组件,避免组件失活后状态丢失。

      1.4、Props参数

      通过props定义参数(Array | Object ),参数都会作为组件元素的attribute特性使用,通过vm.$props获取组件参数。

      🔸Prop对象验证:除了使用数组设置多个参数,还可以用一个对象来申明多个参数及参数规则,用于参数合法性验证。⚠️注意验证的执行是在组件实例创建之前进行的,此时datacomputed都还不可用

      • 每个参数可以指定多个验证类型。
      • 每个参数可以定义类型type、必填require、默认值default,以及验证器函数validator
      性别:

      Vue快速上门(3)-组件与复用插图5

      🔸参数绑定:参数作为自定义组件元素的attribute使用,推荐v-bind:prop绑定赋值,除是非字符串值,绑定是支持表达式的。

      • 如果要传入一个对象的所有 property,直接v-bind="obj"即可。

      🔸参数的单向传递:参数的值是单向的向下传递的,子组件不可更改。

      • 父组件的数据变更会触发子组件所有参数prop的刷新。
      • 如果传入的是一个引用类型(数组、对象),这个是共享的,会影响父组件状态。

      🔸非Props参数的Attribute:对于非Prop参数的Attribute,默认会都应用到组件根元素上,如上面示例中的age="99" required class="form-item"

      • 替换:除了classstyle会合并,其他如果冲突会替换掉组件内部的Attribute
      • inheritAttrs 不继承:可在组件选项里设置inheritAttrs:false取消根元素的Attribute继承。
      • 主动继承:组件内部其他元素可以用 v-bind="$attrs",来主动继承非Prop的Attribute特性(不含class、style)。

      1.5、#slot插槽

      插槽可以用来插入任何内容,包括文本、HTML、其他组件。结合具名插槽(name)、prop绑定,可以实现更为开放、灵活的组件。

      • 申明插槽:在组件内部通过申明一个插槽,整个会被替换为组件元素标签的内容(InnerHTML)。
      • 后备内容/默认值默认显示内容,在没有提供内容时使用后备内容。
      {{search.title[0]}}

      🔸具名插槽,有名字的VIP插槽,name特性取名,用于需要多个插槽的场景。没命名的插槽默认名称为"default"--默认插槽。

      • 必须通过一个模板来使用,用slot参数v-slot:name = #name 指定插槽的名字。无、不指定名字的内容用于默认插槽。
      • 缩写# = v-slot:,只能用于带参数的v-slotv-slot:default
      • 插槽名可以用动态参数,[data-name]

      🔸作用域插槽:插槽内容访问子组件内部数据

      父级不能访问子组件内部的数据,为了可以让插槽内容可以访问到子组件内部的数据,于是有了作用域插槽,主要就是2个步骤。

      ❶ 组件内部把数据绑定在插槽的特性Attribute上 ,称为插槽的Prop,在父级作用域可以访问。

      ❷ 在组件上引用插槽prop :,可取一个新名字。当然这里也可以用当前作用域的绑定数据。

      Vue快速上门(3)-组件与复用插图6

      🌰todo-list(代办列表)的示例:马上掘金 | codepen


      1.6、组件树关系

      属性 描述
      $refs 通过过 refattribute 注册的所有 DOM 元素和组件实例的一个引用对象。
      当 ref 和 v-for 一起使用的时候,其引用为一个数组
      $parent 父实例,根实例的 $parent 为null
      $root 组建树的根实例,根实例的 $root 为自己
      $children 子组件实例数组Array

      Vue快速上门(3)-组件与复用插图7

      当我们构建一颗树形结构(如文件目录树)的组件时,会递归循环引用,造成组件的循环依赖。

      • 全局注册组件。
      • beforeCreate手动注入子组件。
      • 设置webpack异步import引入组件。

      1.7、总结:组件通信

      Vue快速上门(3)-组件与复用插图8

      通过组件关系树也是可以的,不过不推荐,耦合性太高。


      02、可复用性 & 组合

      2.1、[mixins]混入(CtrlV)组件代码

      混入(mixins)可以灵活复用组件中的代码,可惜只能用于组建内,也仅支持Vue的选项。步骤:

      1. 定义混入对象:let cmixin={}
      2. 组件中使用:mixins:[cmixin],混入对象中的内容。

      🔸代码混入(合并)规则:

      • 选项合并:如果混入时存在代码冲突,则会先递归合并,然后本地优先的策略。
      • 混入的钩子,合并为一个数组,依次调用。
      • 全局混入Vue.mixin( mixin ),应用于后面所有的Vue对象。
      • 混入优先级:本地代码优先 > 局部混入 全局混入。
      • 自定义混入合并策略:Vue.config.optionMergeStrategies
      let cmixin = {
          data: { message: "hello world!" },
          methods: { say: function () { console.log(this.message) } }
      }
      let app1 = new Vue({
          el: "#app1",
          data:{name:'sam'},
          mixins: [cmixin],
          //...cmixin,  //不支持合并,会覆盖已有属性值
          created: function () { this.say() }
      })
      

      📢用ES6的展开运算符...,也能达到类似的复用目的,不过不支持合并策略。

      2.2、v-自定义指令

      指令是对Dom元素的扩展,具有一定的行为特征(钩子函数)。注册的自定义指令,需要用指令的钩子函数来触发指令行为,一个指令支持多个钩子函数,不同钩子函数(触发点)可设置不同的行为。如果不指定钩子函数,就是全都要,都会触发调用。

      🔸注册方式:全局、局部

      • 全局注册Vue.directive( id, [definition] ),注意顺序,先定义后使用。
      • 局部注册-选项directives:{ id: { } }

      🔸指令命名:参考HTML命名规范,小写+连字符,正式指令名称会加上v-

      🔸指令函数参数(el, binding, vnode, oldVnode)

      • el:绑定的Dom元素。
      • binding:指令对象,包含指令名称name、参数arg、修饰符modifiers、属性值value、上一次的属性值oldValue、指令表达式 expression。这里的值可用来做变化判断,以优化指令性能。
      • vnode:虚拟Dom元素
      • oldVnode:上一个虚拟Dom元素

      🔸使用

      构子函数 描述
      bind 只调用一次,指令第一次绑定到元素时调用。
      inserted 被绑定元素插入父节点时调用
      update 所在组件的 VNode 更新时调用
      componentUpdated 所在组件的 VNode 更新后调用
      unbind 只调用一次,指令与元素解绑时调用

      🌰自定义指令-验证器表单输入:值为需要验证的数据,其他验证参数check-reg、check-error用自定属性申明,指令用在表单元素后面的一个用于提示错误的元素上。

      Vue快速上门(3)-组件与复用插图9

      2.3、| 插值过滤器

      过滤器就是一个函数,在{{文本插值}}v-bind="表达式"绑定表达式后面使用,对绑定的值进行过滤(再加工)处理。支持链式的过滤使用,支持参数,常用于格式化显示。在V2、V3中,过滤器被逐渐弱化,更推荐用表达式或计算属性。

      • 全局过滤器Vue.filter( id, func(value,...arg ),第一个参数为管道符号前面的绑定值。
      • 局部过滤器-filters{id:func(value,...arg)}选项,(❗多了个s
      • 使用:用管道符号连接,{{文本插值 | filter1 | filter2(arg)}}
      
      
      • {{a | fixedLength(3,' ')}}: {{a|fixedLength(4)| money|money|money}}

      Vue快速上门(3)-组件与复用插图10

      2.4、Vue插件开发

      插件就是一个函数或者包含install()方法的对象,目的是实现封装复用。通过Vue.use() 来安装,给Vue提供全局的扩展能力,如添加全局的指令、方法、组件,混入选项等,很多Vue的UI组件都是这么处理的。

      • install(Vue,...args):插件应该提供的安装函数,第一个参数就是Vue构造器,就可以调用Vue的静态方法做一些处理。后面的参数就是插件自己用的参数了。
      • Vue.use(插件, ...args)注册插件,第一个参数为插件,后面就是插件需要的参数选项了。
      // 封装插件
      export let SuperPlugin = {
          install(Vue, ...args) {
              console.log('安装插件SuperPlugin', args);
              //安装一个UI组件
              Vue.component('super-btn', { template: '' });
              //添加全局静态方法
              Vue.$get = function (url) { /*ajax get*/ };
              Vue.$post = function (url, data) { /*ajax post*/ };
              //添加实例方法
              Vue.prototype.$myMethod = function () { };
              //混入全局的选项
              Vue.mixin({ created: function () {console.log('创建组件') } });
          }
      }
      // 注册插件
      import { SuperPlugin } from './super-plugin.js'
      Vue.use(SuperPlugin, 1, 2, 3);
      

      ©️版权申明:版权所有@安木夕,本文内容仅供学习,欢迎指正、交流,转载请注明出处!原文编辑地址-语雀

      posted @
      2022-12-13 09:20 
      安木夕 
      阅读(19
      评论(0
      编辑 
      收藏 
      举报






    文章来源于互联网:Vue快速上门(3)-组件与复用

    THE END
    分享
    二维码