深入了解组件以及一些命名规范

组件注册

组件名

​ W3C 规范中自定义的组件名：推荐所有字母都是小写的，且包含一个连字符

组件名大小写

​ 两种：一种是连字符的写法，另外一种是大驼峰命名法

​ 注意：直接在 DOM (即非字符串的模板) 中使用时只有 连字符 是有效的

全局注册

​ 注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中，在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用，意思就是随便用不考虑嵌套方面的问题。

​ 弊端：在打包的时候，会浪费空间。

局部注册

​ 1.先通过通过一个普通的 JavaScript 对象来定义组件：

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

​ 2.再通过components 选项中定义你想要使用的组件：

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

​ 注意点：

​ 1.局部注册的组件在其子组件中*不可用*。

​ 2.如果你希望 ComponentA 在 ComponentB 中可用，

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

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

---

prop

prop的大小写：

​ HTML 中的 attribute 名是大小写不敏感的，当你使用DOM模板的时候，驼峰命名法需要使用对应的短横线命名法来替代！！！

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

prop类型：

数组写法：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

对象写法：—用于你希望每个 prop 都有指定的值类型

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

传递静态或动态prop：

静态：

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

动态：用的动态属性绑定

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

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

​ v-bind告诉vue这是一个JavaScript表达式而不是一个字符串

单向数据流

​ 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着**你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。**

注意点：

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

​

Prop验证—用对象写法

​ 如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你

---

自定义事件

事件名：

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

this.$emit('myEvent')

<!-- 没有效果 -->
<my-component v-on:my-event="doSomething"></my-component>

因为事件名不匹配，所以无效的监听！！！

自定义组件的v-model:

​ 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },

---