Vue组件基础

每用一次组件，就会有一个它的新实例被创建

data必须是一个函数

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

避免一个实例，影响到其他所有实例。

动态传递prop

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:title="post.title"
></blog-post>

可以使用v-bind来动态传递prop。一开始不清楚要渲染的具体内容，比如从一个api获取博文列表的时候，是非常有用的。

单个根元素

每个组件必须只有一个根元素

当组件变得越来越复杂的时候，为每个相关信息定义一个prop会变得很麻烦。

所以让它变成一个单独的post prop

<blog-post
  v-for="post in posts"
  v-bind:key="post.id"
  v-bind:post="post"
></blog-post>
<script>
Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
})
</script>

在组件上使用v-model

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

v-mdoel实际上为语法糖

<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)"
    >
  `
})
//重写input事件传出的值，因为v-model在自定义组件和在<input>上不一致

通过插槽分发内容

在需要的地方加入插槽

动态组件

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

动态和异步组件

解析DOM模版时的注意事项

有些 HTML 元素，诸如<ul>,<ol>,<table><select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>,<tr>,<option>，只能出现在其它某些特定的元素内部

使用这些有约束条件的元素时会遇到一些问题

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

这个自定义组件<blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

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

需要注意的是以下来源使用模版的话，这条限制是不存在的

• 字符串 (例如：template: '...')
• 单文件组件 (.vue)
• <script type="text/x-template"></script>