Vue文档2 components

表单输入绑定

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源

.lazy 转为在 change 事件_之后_进行同步

<input v-model.lazy="msg">

.number 自动将用户的输入值转为数值类型

.trim 过滤用户输入的首尾空白字符

组件基础

// 定义一个名为 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' })

`data` 必须是一个函数

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

组件的组织

两种组件的注册类型：全局注册和局部注册

通过 Vue.component 全局注册

prop向子组件传递数据

用v-bind来动态传递prop

单个根元素

将模板的内容包裹在一个父元素内(就是最外面的div)

监听子组件事件

通过 v-on 监听子组件实例的任意事件

同时子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件

在组件上使用 `v-model`

<input v-model="searchText">

等价于

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

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

将其 **value **attribute 绑定到一个名叫 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>

通过插槽分发内容

和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样：

<alert-box>
  Something bad happened.
</alert-box>

Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})

动态组件

上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is attribute 来实现：

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

currentTabComponent 可以包括

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

全局注册

Vue.component('my-component-name', {
  // ... 选项 ...
})

局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

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

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

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

如果通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}

使用了诸如 Babel 和 webpack 的模块系统。在这些情况下我们推荐创建一个 components 目录，并将每个组件放置在其各自的文件中。

基础组件的自动化全局注册

可以使用 require.context 只全局注册这些非常通用的基础组件

全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生