码迷,mamicode.com
首页 > 其他好文 > 详细

Vue#组件

时间:2016-05-11 09:37:05      阅读:449      评论:0      收藏:0      [点我收藏+]

标签:

组件:

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。

使用:

使用Vue.extend()创建一个构造器

var userdefined = Vue.extend({ ... })

 

创建好元素之后,开始注册元素,让你定义的元素可以使用。

这里使用Vue.component去注册组件

// 全局注册组件,tag 为 my-component
Vue.component(‘u‘, userdefined)

官方这里有一个注意:

对于自定义标签名字,Vue.js 不强制要求遵循 W3C 规则(小写,并且包含一个短杠),尽管遵循这个规则比较好。

注册之后,就可以在HTML元素中使用了

<div id="app">
  <u></u>
</div>

这里写了个一个小例子,实现组件内的数据绑定,方法实现,链接:

https://jsfiddle.net/miloer/x00grrts/

注意组件的模板替换了自定义元素,自定义元素的作用只是作为一个挂载点。这可以用实例选项 replace 改变。

局部注册:

在自定义组件里,添加另一个自定义组件,只是在父元素组件里进行调用。链接:

https://jsfiddle.net/miloer/x00grrts/1/

一开始我以为这么用:

html:

<div id="#app">
   <other><u><u/></other>
</div>

但这样只解析other的,而且这样还不符合Vue的设计风格,然后在想想,明白了。

注册语法糖
// 在一个步骤中扩展与注册
Vue.component(‘my-component‘, {
  template: ‘<div>A custom component!</div>‘
})

// 局部注册也可以这么做
var Parent = Vue.extend({
  components: {
    ‘my-component‘: {
      template: ‘<div>A custom component!</div>‘
    }
  }
})

为了让事件更简单,可以直接传入选项对象而不是构造器给 Vue.component()component 选项。Vue.js 在背后自动调用 Vue.extend()

模板解析

Vue 的模板是 DOM 模板,使用浏览器原生的解析器而不是自己实现一个。相对于字符串模板这有一些好处,但是也有问题。DOM 模板必须是有效的 HTML 片段。一些 HTML 元素对什么元素可以放在它里面有限制。常见的限制:

  • a 不能包含其它的交互元素(如按钮,链接)
  • ulol 只能直接包含 li
  • select 只能包含 optionoptgroup
  • table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup
  • tr 只能直接包含 thtd

在实际中,这些限制会导致意外的结果。尽管在简单的情况下它可能可以工作,但是你不能依赖自定义组件在浏览器验证之前的展开结果。例如<my-select><option>...</option></my-select> 不是有效的模板,即使 my-select 组件最终展开为 <select>...</select>

另一个结果是,自定义标签(包括自定义元素和特殊标签,如<component><template><partial> )不能用在 ul, select, table 等对内部元素有限制的标签内。放在这些元素内部的自定义标签将被提到元素的外面,因而渲染不正确。

对于自定义元素,应当使用 is 特性:

<table>
  <tr is="my-component"></tr>
</table>

<template> 不能用在 <table> 内,这时应使用 <tbody><table> 可以有多个<tbody>

<table>
  <tbody v-for="item in items">
    <tr>Even row</tr>
    <tr>Odd row</tr>
  </tbody>
</table>
Props

组件里的涉及的内容挺多的,不过越丰富功能就越完善。

使用props传递数据,组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。“prop” 是组件数据的一个字段,期望从父组件传下来。子组件需要显式地用 props 选项声明 props。

我觉得这样可以在视图层显示的传递数据,假如你封装了一个form组件,增强复用性,就可以动态的更改action method方法了。当然,这个是我目前看到prosps 突然想到的,也能解决目前的一个小问题。

写了两个demo,链接:

https://jsfiddle.net/xeu84559/1/

https://jsfiddle.net/x00grrts/2/

camelCase-vs-kebab-case

HTML 特性不区分大小写。名字形式为 camelCase 的 prop 用作特性时,需要转为 kebab-case(短横线隔开):

Vue.component(‘child‘, {
  // camelCase in JavaScript
  props: [‘myMessage‘],
  template: ‘<span>{{ myMessage }}</span>‘
})

<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

props验证

组件可以为 props 指定验证要求。当组件给其他人使用时这很有用,因为这些验证要求构成了组件的 API,确保其他人正确地使用组件。此时 props 的值是一个对象,包含验证要求:

Vue.component(‘example‘, {
  props: {
    // 基础类型检测 (`null` 意思是任何类型都可以)
    propA: Number,
    // 多种类型 (1.0.21+)
    propM: [String, Number],
    // 必需且是字符串
    propB: {
      type: String,
      required: true
    },
    // 数字,有默认值
    propC: {
      type: Number,
      default: 100
    },
    // 对象/数组的默认值应当由一个函数返回
    propD: {
      type: Object,
      default: function () {
        return { msg: ‘hello‘ }
      }
    },
    // 指定这个 prop 为双向绑定
    // 如果绑定类型不对将抛出一条警告
    propE: {
      twoWay: true
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    },
    // 转换函数(1.0.12 新增)
    // 在设置值之前转换值
    propG: {
      coerce: function (val) {
        return val + ‘‘ // 将值转换为字符串
      }
    },
    propH: {
      coerce: function (val) {
        return JSON.parse(val) // 将 JSON 字符串转换为对象
      }
    }
  }
})

type 可以是下面原生构造器:

  • String
  • Number
  • Boolean
  • Function
  • Object
  • Array

type 也可以是一个自定义构造器,使用 instanceof 检测。

当 prop 验证失败了,Vue 将拒绝在子组件上设置此值,如果使用的是开发版本会抛出一条警告。

加一个 props 动态绑定:

https://jsfiddle.net/uc3zqnew/1/

Vue#组件

标签:

原文地址:http://www.cnblogs.com/moustache/p/5480659.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!