Vue学习之深入了解组件

上一篇：Vue学习之组件基础

组件名

---

在注册一个组件的时候，我们始终需要给它一个名字。该组件名就是 Vue.component的第一个参数。自定义组件名 (字母全小写且必须包含一个连字符)。

组件名大小写

1. kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case。

2.使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。

全局注册

Vue.component 来创建组件,是全局注册的。

局部注册

你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然后在components 选项中定义你想要使用的组件：

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

对于 components对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

Prop

---

Prop类型

每个 prop 都有指定的值类型：

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

传递静态或动态 Prop

给 prop 传入一个静态的值：

<blog-post title="My journey with Vue"></blog-post>

通过 v-bind 动态赋值：

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

传入一个对象的所有属性

post: {
  id: 1,
  title: 'My Journey with Vue'
}

<blog-post v-bind="post"></blog-post>

单向数据流

注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。

Prop 验证

注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

类型检查

type 可以是下列原生构造函数中的一个：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

type 还可以是一个自定义的构造函数，并且通过instanceof来进行检查确认。例如，给定下列现成的构造函数：

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

你可以使用：

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

来验证 author prop 的值是否是通过 new Person 创建的。

自定义事件

---

事件名

跟组件和 prop 不同，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。

推荐你始终使用 kebab-case 的事件名。

将原生事件绑定到组件

Vue 提供了一个$listeners属性，它是一个对象，里面包含了作用在这个组件上的所有监听器。