vue 组件基础

本篇主要是摘抄的vue的官方文档，写此文章的目的是加深对他们的理解。

1.组件的一个基本实例 // 定义一个名为 button-counter 的新组件

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

<div id="components-demo">
  <button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })
复制代码

2.组件的复用 咱们能够将上面自定义的组件进行任意次数的复用

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>
复制代码

注意当点击按钮的时候，每一个组件都会各自独立维护它的count.由于你每用一次组件，就会有一个它的新的实例被建立。

data必须是一个函数，由于每一个实例能够维护一份被返回对象的独立的拷贝。

3.组件的组织 一般一个应用会以一棵嵌套的组件树的形式组成。 组件的注册方式的类型：全局注册和局部注册。 全局注册：

Vue.component('my-component-name', {
  // ... options ...
})
复制代码

全局注册的组件能够用在其被注册以后的任何 (经过 new Vue) 新建立的 Vue 根实例，也包括其组件树中的全部子组件的模板中

4.经过Prop向子组件传递数据是单向的，全部的prop都使得其父子prop之间造成了一个单向下行绑定：父级prop的更新会向下流动到子组件中，可是反过来是不行的。这样会防止从子组件意外改变父级组件的状态。此外，每次父组件发生更新的时候，子组件中全部的prop都会刷新为最新值。

5.监听子组件事件 子组件经过调用内建的$emit方法并传入事件名称来触发一个事件，如今使用一个案例，开发组件时,它的一些功能要求和父级组件进行沟通。例如咱们可能会引入一个可访问性的功能来放大博文的字号，同时让页面的其它部分保持默认的字号。

在其父组件中，咱们能够经过添加一个 postFontSize 数据属性来支持这个功能：

new Vue({
  el: '#blog-posts-events-demo',
  data: {
    posts: [/* ... */],
    postFontSize: 1
  }
})
复制代码

它能够在模板中用来控制全部博文的字号：

<div id="blog-posts-events-demo">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <blog-post
      v-for="post in posts"
      v-bind:key="post.id"
      v-bind:post="post"
    ></blog-post>
  </div>
</div>
复制代码

如今咱们在每篇博文正文以前添加一个按钮来放大字号：

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button>
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
})
复制代码

问题是这个按钮不会作任何事：

<button>
  Enlarge text
</button>
复制代码

当点击这个按钮时，咱们须要告诉父级组件放大全部博文的文本。幸亏 Vue 实例提供了一个自定义事件的系统来解决这个问题。父级组件能够像处理 native DOM 事件同样经过 v-on 监听子组件实例的任意事件：

<blog-post
  ...
  v-on:enlarge-text="postFontSize += 0.1"
></blog-post>
复制代码

同时子组件能够经过调用内建的 $emit 方法 并传入事件名称来触发一个事件：

<button v-on:click="$emit('enlarge-text')">
  Enlarge text
</button>
复制代码

有了这个 v-on:enlarge-text="postFontSize += 0.1" 监听器，父级组件就会接收该事件并更新 postFontSize 的值。

6.使用事件抛出一个值 有的时候用一个事件来抛出一个特定的值是很是有用的。例如咱们可能想让 组件决定它的文本要放大多少。这时可使用 $emit 的第二个参数来提供这个值：

<button v-on:click="$emit('enlarge-text', 0.1)">
  Enlarge text
</button>
复制代码

而后当在父级组件监听这个事件的时候，咱们能够经过 $event 访问到被抛出的这个值：

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

或者，若是这个事件处理函数是一个方法：

<blog-post
  ...
  v-on:enlarge-text="onEnlargeText"
></blog-post>
复制代码

那么这个值将会做为第一个参数传入这个方法：

methods: {
  onEnlargeText: function (enlargeAmount) {
    this.postFontSize += enlargeAmount
  }
}
复制代码

7.在组件上使用v-model

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>
复制代码

到目前为止，关于组件自定义事件你须要了解的大概就这些了，若是你阅读完本页内容并掌握了它的内容，咱们会推荐你再回来把自定义事件读完。

8.动态组件 不一样组件之间的动态切换，这须要

<component>
复制代码

元素的is特性来实现：

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

复制代码

在上述示例中，currentTabComponent 能够包括

• 已注册组件的名字，或

• 一个组件的选项对象