学习笔记：Vue——组件和Prop

前言：这一篇是关于组件基础、组件注册、Prop等内容。

---

1.组件基础

01.组件是可复用的Vue实例

02.组件中的data选项必须是一个函数

03.一个组件默认可以有任意数量的prop

任何值都可以传递给任何prop。就像访问data一样。

04.使用$emit监听子组件事件

一个全局的子组件代码：

Vue.component('blog-post', {
    props: ['post'],
    template: `
        <div class="blog-post">
            <h3>{{ post.title }}</h3>
            <button v-on:click="$emit('enlarge-text', 0.1)">放大文字</button>
            <div v-html="post.content"></div>
        </div>
    `
})

父组件代码：

<blog-post v-bind:post="post" :style="{fontSize: postFontSize + 'em'}" v-on:enlarge-text="onEnlargeText"></blog-post>

var vm = new Vue({
    el: '#app',
    data: {
        post: {
            id: 1,
            title: '给一个青年诗人的十封信',
            content: '<p>Vue从入门到实战</p>'
        },
        postFontSize: 1
    },
    methods: {
        onEnlargeText: function (enlargeAmount) {
            this.postFontSize += enlargeAmount
        }
    }
})

05.使用事件抛出一个值

子组件的一个事件可以通过$emit的第二个参数来提供一个值，在父级组件监听这个事件时，通过$event访问被抛出的这个值。

<blog-post
  ...
  v-on:enlarge-text="postFontSize += $event"
></blog-post>

06.在组件上使用v-model

自定义事件也可以用于创建支持v-model的自定义输入组件

<input v-model="searchText">

等价于：

<input
  v-bind:value="searchText"
  v-on:input="searchText = $event.target.value"
>

当用在组件上时，v-model则会这样：

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>

为了让它正常工作，这个组件内的<input>必须：

• 将其value特性绑定到一个名叫value的prop上
• 在其input事件被触发时，将新的值通过自定义的input事件抛出

示例如下：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

现在v-model就应该可以在这个组件上完美地工作起来了：

<custom-input v-model="searchText"></custom-input>

07.动态组件

Vue有一个<component>元素，它有一个is属性

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中，currentTabComponent可以包括：

• 已注册组件的名字，或
• 一个组件的选项对象

08.特殊的is属性的妙用

有些html元素，诸如<ul>、<ol>、<table>、<select>，对于哪些元素可以出现在其内部是有严格限制的。

<table>
  <blog-post-row></blog-post-row>
</table>

这个自定义组件<blog-post-row>会被作为无效的内容提升到外部，使用is特性可解决：

<table>
  <tr is="blog-post-row"></tr>
</table>

2.Prop

01.Prop类型

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

02.传入一个对象的所有属性

如果你想要将一个对象的所有属性都作为prop传入，你可以使用不带参数的v-bind取代b-bind:prop-name，例如：

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

下面的模板：

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

等价于：

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

03.单向数据流

所有的prop都使得其父子prop之间形成了一个单向下行绑定

每次父级组件发生更新时，子组件中所有的prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。

04.Prop验证

这在开发一个会被别人用到的组件时尤其有帮助。

Vue.component('my-component', {
    props: {
        //基础的类型检查
        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会在一个组件实例创建之前进行验证，所以实例的属性（如data、computed等）在default或validator函数中不可用。

05.类型检查

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创建的

06.非Prop的特性

（1）组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上

（2）替换/合并已有的特性

对绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏。 class 和 style会合并两边的值。

（3）禁用特性继承

如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

一个基础组件的例子：

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

注意：inheritAttrs: false不会影响style和class的绑定

这个模式允许你在使用基础组件的时候更像是使用原始的HTML元素，而不会担心哪个元素是真正的根元素

<base-input
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>

笔记摘自Vue官方文档：

• 组件基础
• Prop