Vue学习计划基础笔记(六) - 组件基础

组件基础

目标：

1. 掌握组件的构建方式
2. 掌握如何复用组件、父子组件如何传值、如何向父组件发送消息
3. 掌握如何通过插槽分发内容
4. 了解解析dom模板时的注意事项
5. 了解动态组件

组件

1. 组件理解起来大概上就和php的include一样, 也就是把页面分成几个部分(或文件).
2. 组件就是把页面分成几块,每一块就是一个组件,组件使用起来就是引入,声明,使用.
3. 很通俗的说,组件的使用就是自定义html标签的使用.

组件的注册(定义)

1.全局组件

// (组件名, 配置)
Vue.component('cpn-name',{
    data: function(){
        return {
            count: 0
        }
    }
    template: '<button @click="count++">{{count}}</button>'
});

2.局部组件

...
components: {
    cpnName: {
        data: function(){
            return {
                count: 0
            }
        }
        template: '<button @click="count++">{{count}}</button>'
    }
};
...

3. 单文件组件

组件注意点

1. 组件名的大小写
   定义的时候可以使用 my-component 或者 MyCompnent 这样的形式
   使用的时候因为html是大小写不敏感的, 在DOM(非字符串模版)中使用时只有my-component的形式是有效的.

2. 组件的data必须是一个函数
   这个函数返回一个对象.
   至于为什么要是function(){return{..}}的形式, 那是因为这样每个实例可以维护一份被返回对象的独立的拷贝, 不然复用的时候会相互影响.

3. 组件的复用
   组件在复用的时候,因为data的定义是return的对象,所以每用一次组件,就会有一个它的新 实例 被创建, 同样data也会是新的.

4. 单个根元素
   在构建组件的时候,组件只能有一个根元素,如果组件内包含多个元素,根元素只能有一个.

5. 组件的使用
   <my-component></my-component>这样使用就可以了
   (在单文件组件(Vue文件)中文档推荐使用<my-component/>这种写法,但是在HTML中文档不推荐使用<my-component/>这种写法,因为HTML并不支持自闭合的自定义元素)

组件传递数据

父组件 => 子组件 (通过prop)

1. prop是组件上自定义的特性,在 父组件 使用子组件的时候加上. 可以在 子组件 注册的时候通过props0拿到这些prop值.
2. 例子

<blog-post title="Blogging with Vue"></blog-post>
Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

编译后:

<h3>Blogging with Vue<h3>

子组件 => 父组件 (通过$emit()发送事件传递参数)

1. 在模版中使用普通的js事件来触发$emit(),
   $emit('my-event')是一个用来主动触发事件的方法,
   而这个'my-event'就是可以在 父组件 使用子组件的时候加上的,
   利用触发这个'my-event'可以触发父组件中的methods
   中间只要传递参数就可以实现传值了

2. 例子

Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
        <button v-on:click="$emit('enlarge-text')">   <!-- 1.触发enlarge-text -->
        Enlarge text
        </button>
      <div v-html="post.content"></div>
    </div>
  `
})

<blog-post
  v-on:enlarge-text="postFontSize += 0.1"             <!-- 2.被触发enlarge-text然后执行对应操作 -->
></blog-post>

组件插槽(slot)分发内容

1. 一般来说,两个开闭标签之间是有内容的,那么如果在组件(自定义标签)开闭标签之间写入的内容的话会怎么样, slot就是用在接收的了, 只要在组件模版里面写上就可以接收了.

2. 例子:

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

<alert-box>这是错误</alert-box>

编译后:

    <div class="demo-alert-box">
      <strong>Error!</strong>
      这是错误
    </div>

动态组件

1. 概括: 使用一个is特性(属性),来指定组件
2. 也就是我们可以动态的去改变is的值, 然后实现动态的显示不同的组件
3. 例子:

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

解析DOM模版时的注意事项

1. 在HTML标准中,有些元素是固定的嵌套的, 例如ul>li, ol>li,table, select, 假如要在这些标签内使用组件,就需要使用is来指定组件,不然就会报错.

2. 例子:

<!-- 报错 -->
<table>
  <blog-post-row></blog-post-row>
</table>
<!-- 正确 -->
<table>
  <tr is="blog-post-row"></tr>
</table>