kano个人博客:vue组件深入

kano个人技术博客 web前端开发 1,207 次浏览 没有评论

前面kano讲解过vue组件的基础,想必大家已经体会过组件的好处了。本篇会带你更加深入的了解vue组件,讲解一些值得注意的点,以及一些更高级的特性。

vue组件技术

一、组件注册

之前的注册组件我们只用Vue.component:

Vue.component('custom-component-name', {
  // some code
});

这种组件是全局注册,注册后可以使用在任何地方,包括其他组件的内部:

<div id="app">
  <my-div></my-div>
  <my-div></my-div>
</div>
Vue.component('my-div', {
  template: `
    <div>
      <my-span></my-span>
      <my-span></my-span>
    </div>
  `
});

Vue.component('my-span', {
  template: '<span>span内容</span>'
});

let app = new Vue({
  el: '#app',
  data: {
  },
  methods: {
  }
});

vue组件

可以看到在自定义组件my-div”中可以使用“my-span”,即使“my-span”的注册在“my-div”后面,仍然可以正常运行。(但注意组件的注册不能放到Vue实例后面)

 

有时候全局注册并不理想,我们有时候会写一些很通用的组件(一个组件库),而在实际的应用中并不会把所有的组件都使用上,如果你使用webpack打包项目,这些无谓的代码仍然会包含在打包的结果中,造成浪费。所以,我们还可以使用局部注册。

 

可以使用一个普通的js对象存储组件,在vue实例中用components进行局部注册:

<my-span></my-span>
var com_my_span = {
  template: '<span>span内容</span>'
};

let app = new Vue({
  el: '#app',
  components: {
    'my-span': com_my_span
  }
});

注意局部注册组件就只能在其注册的地方使用了。

二、Prop

1. 大小写

html的特性名对大小写不敏感,所以当你在props中使用驼峰命名法的属性时,在为组件绑定属性时要使用中划线语法:

<my-span one-prop="啊啊啊啊"></my-span>
var com_my_span = {
  props: ['OneProp'],
  template: '<span>span内容{{OneProp}}</span>'
};

2. 数据验证

之前我们看到的props是一个字符串数组,列出了我们要传递给组件的属性名:

props: ['name', 'age', 'job']

在一个多人的开发团队中,开发组件和使用组件的并不一定是一个人,有时候,我们希望对传递给组件的参数有所限制,比如希望给年龄传递一个非负的整数而不是字符串,员工列表希望是一个数组而不是基本类型;如果传递非预期的类型,希望以某种方式发出警告或者报错——props其实本身就提供了这种功能。

props: {
  name: String,
  age: Number,
  extra: null
},

像这样,props可以接受对象类型的参数,这样就可以给每个参数指定期望的类型了。当传递的非预期的类型时——比如给name传递了一个整型的“15”时,vue将会发出一条警告:

vue组件

注意开发版的vue才会产生警告,生产版本的不会。

如果你希望某个属性不为其指定约束,则为其赋值“null”就可以了,如上例中的extra。

上面的例子只是一个简单的数据类型验证,实际上能做的验证不止这个,其验证类型非常完备:多类型检查、是否必须、默认值、自定义验证。

props: {
  // 验证类型为Number
  param1: Number,
  // 多类型验证,可以是Number或者String
  param2: [Number, String],
  // 多类型验证,且参数为必须,不传会发生警告
  param3: {
    type: [Array, Object],
    required: true
  },
  // 有默认值,当不传参数则默认为15
  param4: {
    type: Number,
    default: 15
  },
  // 对象或数组类型的默认值必须用一个工厂函数
  param5: {
    type: Object,
    default: function () {
      return {mes: 'hello world'}
    }
  },
  // 自定义验证方法,当值是一个数字类型且在[0, 100]区间内验证通过
  param6: {
    validator: function (value) {
      if (typeof value === 'number') {
        return value >= 0 && value <= 100;
      } else {
        return false;
      }
    },
    required: true
  }
}

可以看到验证类型非常丰富,使用方法请大家看代码中的注释就可以了。

3. Prop的特性

并不是很常用,指的是在props中没有定义的,但仍给组件传递的prop的特性。

<my-input name="a-input" type="text"></my-input>
var com_my_input = {
  props: ['name'],
  template: '<input :name="name" type="password" maxlength="5"/>'
};

let app = new Vue({
  el: '#app',
  components: {
    'my-input': com_my_input
  }
});

vue组件

type属性未在props中定义,但我们在使用时仍给他传递了这个属性,可以看到在实际的渲染结果中原本的type=password被覆盖掉了。

这种特性被称为特性继承,具体的规则是:非prop特性将会传递给子组件的根元素,当根元素中已经存在属性时则会将其替换掉。class和style是两个特例,vue对他们进行了特别的处理,当子组件本身有class和style,并且也给他们传递了这两个特性的时候,两遍的class和style将会合并。

本篇kano个人技术博客vue组件的一些高级特性进行了讲解,希望对大家有所帮助。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Go