Vue 组件

组件是可复用的 Vue 实例，所以与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。(类似闭包。)否则同一组件的各个实例的data会共用。

data: function () {
  return {
    count: 0
  }
}

组件名

组件名可以接受kebab-case和PascalCase,但在dom中使用时只能接受kebab-case(且至少包含一个连字符),例如 <my-component-name>。

组件注册

全局注册

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中(包括自己引用自己)。

Vue.component('my-component-name', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})
局部注册
  • 通过 components 对象进行局部注册。其key就是自定义元素的名字，其属性值就是这个组件的选项对象。
  • 可注册的位置包括new Vue()中，另一个component中，以及采用import时的 export default 内。
components: {
  "my-component-name": {
    props: ['title'],
    template:'<h3>{{ title }}</h3>'
  }
}

根元素和属性继承

  • 每个组件必须有且只有一个根元素。
  • 为组件赋予的class，style等非prop属性，会自动合并到该组件实例的根元素上
    对于class，style以外的非prop属性可通过在组件的选项对象中配置inheritAttrs: false禁用自动合并到根元素，而实例的$attrs可以指定由哪个元素继承组件上的属性
<base-input
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>
...
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>
  `
})

数据传递

通过 Prop 向子组件传递数据
  • prop名在 JavaScript 中可以是 camelCase 的(但依然推荐使用kebab-case)，但在 HTML 中总是 kebab-case 的。
  • 在组件实例中能够访问props的值，就像访问 data 中的值一样。prop会读取组件中的自定义属性。
  • prop可以以字符串数组形式表示，也可以以对象形式，指定各个prop值的类型，并提供必选，默认值，校验等配置。
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
//或
props: {
  title: String,
  likes: [Number,String],//多个可能的类型
  isPublished: {
    type: Boolean,
    required: true,//必填
    default: 100//设置默认值  
  },
  counts:{
      validator: function (value) {//自定义验证函数，可在开发环境抛出log警告
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
  },
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}
  • 传入布尔值
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>

<!-- 使用 `v-bind` 告诉 Vue 这是一个布尔值表达式而非字符串。 -->
<blog-post v-bind:is-published="false"></blog-post>
  • 传入一个对象的所有属性
    可以使用不带参数的 v-bind
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>
  • 单项数据流
    父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
    每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。因此不应该在一个子组件内部改变 prop。
    当需要在子组件中改变prop时，可采取：
    1. 定义一个本地的 data 属性并将这个 prop 用作其初始值
    2. 使用一个计算属性来关联这个 prop 的值
    • 注意，在子组件中改变prop引用的对象或数组本身将会影响到父组件的状态。

事件驱动

  • 事件名应始终使用kebab-case。(不像prop中vue做了优化，会将js中的camelCase在html中转为kebab-case)
  • 父级组件 v-on 监听子组件实例，子组件通过调用$emit 来触发一个事件，也可以在子组件中通过$on监听事件
<blog-post v-on:enlarge-text="postFontSize += $event"></blog-post>

components: {
  "my-component-name": {
    template: '
        <button v-on:click="$emit('enlarge-text', 0.1)">
            Enlarge text
        </button>',
    mounted() {
      this.$on('enlarge-text', target => {
        console.log("enlarge-text", target)
      })
   }
}

通过EventBus实现组件间通讯

公共事件总线EventBus的实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。
通过单独建一个vue实例，并在需要通讯的A、B组件中同时导入

import Vue from 'Vue'
export default new Vue

import EventBus from '这里是你引入bus.js的路径'

在A组件中调用EventBus.$emit，在B组件中监听EventBus.$on，即实现通讯
注意，在B组件的beforeDestroy或者destroyed中应调用EventBus.$off清除监听，否则重复加载B时会导致创建多个监听

将原生事件绑定到组件

如根元素直接为发生事件的元素，需使用.native修饰符。否则此处事件（focus）会被认为是对子组件emit的监听，而非浏览器原生事件。

<base-input v-on:focus.native="onFocus"></base-input>

否则可利用$listeners属性

双向绑定

通过props和$emit完成父子组件双向绑定

v-model

v-model是双向绑定的一个特例，利用名为 value 的 prop 和名为 input 的事件（或在子组件model配置中修改），即可简写为v-model

<custom-input
  v-bind:value="searchText"
  v-on:input="searchText = $event"
></custom-input>
//或
<custom-input v-model="searchText"></custom-input>
...
Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})
  • 像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：
<base-checkbox v-model="lovingVue"></base-checkbox>
...
Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})
.sync修饰符

.sync修饰符是双向绑定的一个特例，利用名为 XXX 的 prop 和名为 update:XXX 的事件，即可简写为.sync

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>
...
this.$emit('update:title', newTitle)

<text-document v-bind:title.sync="doc.title"></text-document>

插槽

组件元素间的html内容,可以通过<slot></slot>插入渲染后的组件实例。否则会被全部废弃。

<alert-box>
  Something bad happened.
</alert-box>
...
Vue.component('alert-box', {
  template: `
    <div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>
  `
})
后备内容

写在<slot>标签内，若父级组件中没有传入插槽内容，则显示该后备内容。(虽然写在子组件内，但作用域同父级组件)

具名插槽 和 作用域插槽 (2.6.0)
  • 具名插槽
    通过 <slot> 元素的name属性，定义额外的插槽。一个不带 name 的 <slot> 出口会带有隐含的名字“default”。在向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称。
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
</div>
...
<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>
  <p>A paragraph for the main content.</p>
</base-layout>
  • 作用域插槽

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

因此通常插槽可访问父级作用域而非子级作用域。如果需要访问子组件实例中的属性，可以在 <slot> 元素上添加特性，并为v-slot赋值进行关联

<span>
  <slot :user="user">
    {{ user.lastName }}
  </slot>
</span>
...
//此处的slotProps等同于插槽的props
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>
  • 跟 v-on 和 v-bind 一样，v-slot 也可缩写为 #。例如 v-slot:header 可以被重写为 #header
独占插槽的缩写

当仅含有默认插槽时,v-slot可以不写在<template>中而直接写在组件上，甚至可以省略default

<current-user v-slot:default="slotProps"></current-user>
<current-user v-slot="slotProps"></current-user>
动态插槽

同动态指令参数，使用 [XXX]

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

动态组件 和 异步组件

动态组件

通过 <component> 元素和 is 特性来实现：

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

在解析dom模板时，有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。此时可以通过is防止渲染出错。

<table>
  <tr is="blog-post-row"></tr>
</table>
在动态组件上使用 keep-alive

组件动态切换时，可以继承上次离开时的状态

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>
异步组件

可以使用工厂函数(Promise)按需加载模块 查看文档

单文件组件

文件扩展名为 .vue 的 单文件组件，解决了多个component重名，字符串模板的语法高亮，组件作用域的CSS，模块化构建等问题，且方便使用各种预处理器。

组件间通信方式总结

  1. provide / inject
    允许一个祖先组件向其所有子孙后代注入一个依赖。
    可以视为祖先组件和后代组件间的“long range props”，除了：
  • 父组件不需要知道哪些子组件使用它 provide 的 property
  • 子组件不需要知道 inject 的 property 来自哪里

provide 和 inject 绑定没有做响应式处理。但如果传入了一个对象，其属性还是可响应的。

// 祖先组件
app.component('todo-list', {
  data() {
    return {
      a:{name:100}
    }
  },
  provide: {
    a:this.a,//无法如此操作,应改为如下的provide函数形式
    b: 200
  },
  provide(){
    return {
      a:this.a，
      todoLength: Vue.computed(() => this.todos.length)
    }
  }
}

// 子组件
app.component('todo-list-statistics', {
  inject: ['a'],
  created() {
    console.log(`Injected property: ${this.a.name}`)
  }
})
  1. Vue.observable
    让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
    返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景：
const state = Vue.observable({ count: 0 })
const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}
  1. $attrs
    包含了父作用域中未被props涵盖的特性，通常用于在创建高级别组件时再通过 v-bind="$attrs" 传入更内部的组件。
  2. $listeners
    包含了父作用域中的 (非 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
  3. props
  4. $emit
  5. eventbus
  6. vuex
  7. $parent / $children / ref

父子组件钩子顺序

  • 加载渲染过程
    父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
  • 子组件更新过程
    父beforeUpdate->子beforeUpdate->子updated->父updated
  • 父组件更新过程
    父beforeUpdate->父updated
  • 销毁过程
    父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342