Vue——深入组件（ part 1）

深入组件内容有点多，我分了两部分，这部分包括：组件注册、Prop、自定义事件。

11 深入组件

组件注册。全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例的模板中，也包括其组件树中的所有子组件的模板中。
- HTML 中组件必须用在 Vue 根实例的模板中，不然无效。
- 全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。
组件命名。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
- 当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说和都是可接受的。注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
- 这里的字符串模板，总是容易让人理解为一个特定名词，联想到 ES6 的模板字符串。其实就是指用在 HTML 中的模板。
- 在 DOM 中（或者说在 HTML 中），只有小写短横线形式是有效的。
局部注册。
- 对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象（我喜欢称之为配置对象）。
- 注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：
```
var ComponentA = { /* ... */ }

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

Prop 命名
- 当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。这点和组件名是一样的。
- 这在 Vue 中多次强调了，简单来说，就是 Vue 会把驼峰形式的 prop 名转换为短横线形式。
- 可是我测试直接使用短横线法命名 prop ，然后在 template 中（所谓字符串的模板）也通过短横线法调用该 prop 时却报错了，貌似在 template 中不能使用短横线法？

Prop 类型

冷知识，props 也可以是对象（前面都是以数组的形式出现），为每个 prop 指定类型。例：

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

写法有点像 TypeScipt。。

传递静态或动态 Prop
- v-bind 会告诉 Vue 传递的值是 JS 表达式而不是字符串。
- 如果要向 prop 传递一个非字符串的值，无论是静态还是动态的都需要使用 v-bind 。
- 传入一个对象的所有 property 。如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。
```
post: {
 id: 1,
 title: 'My Journey with Vue'
}



// 等价于
```
- 疑问：一个标签内能否出现多个 v-bind 属性？
单向数据流
- 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
- 这本来就是 v-bind 的特性，数据由 Vue 实例中的变量单向流向 prop，只有 v-model 才是双向绑定。
- 每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
- 经测试，确实发出了警告。但，子组件中的 prop 也能变化，并且父级 prop 不受影响。
- 教程中举了两个常见的试图变更一个 prop 的例子：
  - 这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。
  - 这个 prop 以一种原始的值传入且需要进行转换。
- 教程中也给出了最佳实践：
  - 最好定义一个本地的 data property 并将这个 prop 用作其初始值：
```
props: ['initialCounter'],
 data: function () {
   return {
     counter: this.initialCounter
   }
 }
```
  - 最好使用这个 prop 的值来定义一个计算属性：
```
props: ['size'],
 computed: {
   normalizedSize: function () {
     return this.size.trim().toLowerCase()
   }
 }
```
  - 注意，以上例子中组件的 computed 属性不需要像 data 一样是一个返回对象的函数。这意味着组件的 computed 属性是共享的吗，并不是每一个组件实例对应一个 computed ？好像确实没必要，就像原型方法一样。
- 注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。

Prop 验证

props 不仅可以是一个对象，不仅仅可以为 prop 指定类型，还有更强大的用法（更复杂。。）。我们可以为组件的 prop 指定验证要求。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。

你可以为 props 中的值提供一个带有验证需求的对象，例如：

Vue.component('my-component', {
   props: {
     // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
     propA: Number,
     // 多个可能的类型
     propB: [String, Number],
     // 必填的字符串
     propC: {
       type: String,
       required: true
     },
     // 带有默认值的数字
     propD: {
       type: Number,
       default: 100
     },
     // 带有默认值的对象
     propE: {
       type: Object,
       // 对象或数组默认值必须从一个工厂函数获取
       default: function () {
         return { message: 'hello' }
       }
     },
     // 自定义验证函数
     propF: {
       validator: function (value) {
         // 这个值必须匹配下列字符串中的一个
         return ['success', 'warning', 'danger'].indexOf(value) !== -1
       }
     }
   }
 })

注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
type 可以是下列原生构造函数中的一个：String、Number、Boolean、Array、Object、Date、Function、Symbol 。type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。

非 Prop 的 Attribute 这小节感觉又有点不好理解。。
- 显式定义的 prop 适用于向一个子组件传入信息。
- 首先，在 HTML 中可以为组件添加任意的 attribute （即使在组件注册时没有显式定义的 prop ），而这些 attribute 会被添加到这个组件的根元素上。
- 对于绝大多数 attribute 来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！庆幸的是，class 和 style attribute 会稍微智能一些，即两边的值会被合并起来，从而得到最终的值。
- 然后有个强大的功能来了。很多时候我们定义的组件的根元素只是起到一个容器的作用，比如 div 。我们可能想传一个 attribute 或一个样式给组件中的某个真正发挥作用的元素。以下。
- 如果你不希望组件的根元素继承 attribute，你可以在组件的选项中设置 inheritAttrs: false。
- 这尤其适合配合实例的 $attrs property 使用，该 property 包含了传递给一个组件的 attribute 名和 attribute 值。例：
```
Vue.component('base-input', {
   inheritAttrs: false,
   props: ['label', 'value'],
   template: `
     
       {{ label }}
       
     
   `
 })
```
- 等等，$attrs preperty 不包含显示定义的prop？？？比如不包含上面例子中的 label value
- 注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。额，打脸了，那如何在外部设置组件内部元素的样式呢？
- 这个模式允许你在使用基础组件的时候更像是使用原始的 HTML 元素，而不会担心哪个元素是真正的根元素。

自定义事件事件名
- 不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。
- 这里的说法应该是有瑕疵的，应该是“事件名在 Vue 中不存在任何自动化的转换”，Vue 不会把事件名自动转化为短横线法，但在 DOM 模板（ HTML ）中属性名全都是小写。v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
- 因此，最佳实践：始终使用 kebab-case 的事件名。
自定义组件的 v-model
- 再次研究 v-model 这个语法糖。在组件上使用 v-model
- v-model 需要一个 prop 作为绑定的值，v-bind:prop 将 JS 中的数据绑定到 prop；需要监听一个事件 event，v-on:event 将 prop 的变化绑定回 JS 中，这样便是双向绑定了。
- 注意 $emit 方法，它创建一个新事件名的同时会触发这个事件。$event 是一个特殊变量，好像是指原始的 DOM 事件，又好像是指事件触发的参数，“当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值”。或者说 $event 有两种用法？感觉要复习一下原生 JS 的事件，好像是我原生 JS 事件没学好。。
- 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。
- 没想到吧，还有 model 选项。。组件的 model 选项有两个属性：prop 和 event。
- 单选框、复选框等类型的输入控件有点奇怪。它们有两个事件一个 change，一个 input。详情：MDN input-checkbox 文档中这小节也很奇怪，中文版阉割了。。
- 回看一下前面的表单输入绑定部分：
- v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
  - text 和 textarea 元素使用 value property 和 input 事件；
  - checkbox 和 radio 使用 checked property 和 change 事件；
  - select 字段将 value 作为 prop 并将 change 作为事件。
- 似乎理解深入了许多。但是，这里的例子告诉你上面关于 checkbox 和 radio 的描述是错的。v-model 应该为 checkedbox 和 radio 特殊处理了，使用了 change 事件是没错，但并不是使用 checked property 那么简单，较为准确的说是：绑定到 JS 中的值是 checked 的那个 checkbox 或 radio 的 value。甚至 v-model 将多个 checkbox 或 radio 绑定到一个 JS 变量。明明就是额外处理了嘛，教程却不讲，只能去看源码才能知道它到底是怎么处理 checked 和 radio 的。
将原生事件绑定到组件
- 你可能想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符。在有的时候这是很有用的，不过在你尝试监听一个类似的非常特定的元素时，根元素实际上是一个元素。这时，父级的 .native 监听器将静默失败。它不会产生任何报错，但是 onFocus 处理函数不会如你预期地被调用。
- 为了解决这个问题，Vue 提供了一个 $listeners property，它是一个对象，里面包含了作用在这个组件上的所有监听器。有了这个 $listeners property，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。可以像下面这样使用：
```
Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign` 将所有的对象合并为一个新对象
      return Object.assign({},
        // 我们从父级添加所有的监听器
        this.$listeners,
        // 然后我们添加自定义监听器，
        // 或覆写一些监听器的行为
        {
          // 这里确保组件配合 `v-model` 的工作
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    
      {{ label }}
      
    
  `
})
```
- 这个例子很好，值得学习！
- 现在组件是一个完全透明的包裹器了，也就是说它可以完全像一个普通的元素一样使用了：所有跟它相同的 attribute 和监听器都可以工作，不必再使用 .native 监听器。
.sync 修饰符
- Vue 2.3.0 新增
- 又是语法糖。。。sync 是 synchronous communication 同步通信的缩写吗？
- 在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。
- 上面这段话什么意思。。 v-model 其实就已经是双向绑定了啊。还有“在父组件和子组件都没有明显的变更来源”怎么理解？如果通过事件触发数据变更就可以追踪变更来源吗？
- .sync 怎么用？如下;
```
this.$emit('update:title', newTitle)
```
  这个模式可以通过 .sync 简写
- 注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的 property 名，类似 v-model。
- 当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：
  这样会把 doc 对象中的每一个 property (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。
- 将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的。
- 教程中没有一个完整的例子啊。。。

Vue——深入组件（ part 1）

11 深入组件

你可能感兴趣的:(Vue——深入组件（ part 1）)