Vue.js学习 Item11 – 组件与组件间的通信

什么是组件？

is

使用组件

注册

Vue.extend()

var MyComponent = Vue.extend({
// 选项...
})

// 全局注册组件，tag 为 my-component
Vue.component('my-component', MyComponent)

<p class="tip">

<my-component>

<div id="example">
<my-component></my-component>
</div>

// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})

// 注册
Vue.component('my-component', MyComponent)

// 创建根实例
new Vue({
el: '#example'
})

<div id="example">
<div>A custom component!</div>
</div>

replace

局部注册

components

var Child = Vue.extend({ /* ... */ })

var Parent = Vue.extend({
template: '...',
components: {
// <my-component> 只能用在父组件模板内
'my-component': Child
}
})

注册语法糖

Vue.component()

component

Vue.extend()

// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})

// 局部注册也可以这么做
var Parent = Vue.extend({
components: {
'my-component': {
template: '<div>A custom component!</div>'
}
}
})

组件选项问题

Vue.extend()

data

el

data

Vue.extend()

var data = { a: 1 }
var MyComponent = Vue.extend({
data: data
})

var MyComponent = Vue.extend({
data: function () {
return { a: 1 }
}
})

模板解析

a

ul

ol

li

select

option

optgroup

table

thead

tbody

tfoot

tr

caption

col

colgroup

tr

th

td

<my-select><option>...</option></my-select>

my-select

<select>...</select>

<component>

<template>

<partial>

ul

select

table

is

<table>
<tr is="my-component"></tr>
</table>

<table>
<tbody v-for="item in items">
<tr>Even row</tr>
<tr>Odd row</tr>
</tbody>
</table>

Props

使用 Props 传递数据

props

Vue.component('child', {
// 声明 props
props: ['msg'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '<span>{{ msg }}</span>'
})

<child msg="hello!"></child>

驼峰式vs.横杠式

Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})

<!-- kebab-case in HTML -->
<child my-message="hello!"></child>

动态 Props

v-bind

v-bind

<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>

<child :my-message="parentMsg"></child>

字面量语法 vs. 动态语法

<!-- 传递了一个字符串 "1" -->
<comp some-prop="1"></comp>

<!-- 传递实际的数字  -->
<comp :some-prop="1"></comp>

Prop 绑定类型

.sync

.once

<!-- 默认为单向绑定 -->
<child :msg="parentMsg"></child>

<!-- 双向绑定 -->
<child :msg.sync="parentMsg"></child>

<!-- 单次绑定 -->
<child :msg.once="parentMsg"></child>

msg

parentMsg

Prop 验证

Vue.component('example', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型 (1.0.21+)
propM: [String, Number],
// 必需且是字符串
propB: {
type: String,
required: true
},
// 数字，有默认值
propC: {
type: Number,
default: 100
},
// 对象/数组的默认值应当由一个函数返回
propD: {
type: Object,
default: function () {
return { msg: 'hello' }
}
},
// 指定这个 prop 为双向绑定
// 如果绑定类型不对将抛出一条警告
propE: {
twoWay: true
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
},
// 转换函数（1.0.12 新增）
// 在设置值之前转换值
propG: {
coerce: function (val) {
return val + '' // 将值转换为字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // 将 JSON 字符串转换为对象
}
}
}
})

type

type

instanceof

父子组件通信

父链

this.$parent

this.$root

this.$children

自定义事件

$on()

$emit()

$dispatch()

$broadcast()

true

<!-- 子组件模板 -->
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
</template>

<!-- 父组件模板 -->
<div id="events-example">
<p>Messages: {{ messages | json }}</p>
<child></child>
</div>

// 注册子组件
// 将当前消息派发出去
Vue.component('child', {
template: '#child-template',
data: function () {
return { msg: 'hello' }
},
methods: {
notify: function () {
if (this.msg.trim()) {
this.$dispatch('child-msg', this.msg)
this.msg = ''
}
}
}
})

// 初始化父组件
// 将收到消息时将事件推入一个数组
var parent = new Vue({
el: '#events-example',
data: {
messages: []
},
// 在创建实例时 `events` 选项简单地调用 `$on`
events: {
'child-msg': function (msg) {
// 事件回调内的 `this` 自动绑定到注册它的实例上
this.messages.push(msg)
}
}
})

使用 v-on 绑定自定义事件

"child-msg"

v-on

<child v-on:child-msg="handleIt"></child>

子组件索引

v-ref

<div id="parent">
<user-profile v-ref:profile></user-profile>
</div>

var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile

v-ref

v-for

使用 Slot 分发内容

<app>
<app-header></app-header>
<app-footer></app-footer>
</app>

<app>

<app>

<app>

<slot>

编译作用域

<child-component>
{{ msg }}
</child-component>

msg

<!-- 无效 -->
<child-component v-show="someChildProperty"></child-component>

someChildProperty

Vue.component('child-component', {
// 有效，因为是在正确的作用域内
template: '<div v-show="someChildProperty">Child</div>',
data: function () {
return {
someChildProperty: true
}
}
})

单个 Slot

<slot>

<slot>

my-component

<div>
<h1>This is my component!</h1>
<slot>
如果没有分发内容则显示我。
</slot>
</div>

<my-component>
<p>This is some original content</p>
<p>This is some more original content</p>
</my-component>

<div>
<h1>This is my component!</h1>
<p>This is some original content</p>
<p>This is some more original content</p>
</div>

具名 Slot

<slot>

name

slot

multi-insertion

<div>
<slot name="one"></slot>
<slot></slot>
<slot name="two"></slot>
</div>

<multi-insertion>
<p slot="one">One</p>
<p slot="two">Two</p>
<p>Default A</p>
</multi-insertion>

<div>
<p slot="one">One</p>
<p>Default A</p>
<p slot="two">Two</p>
</div>

动态组件

<component>

is

new Vue({
el: 'body',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})

<component :is="currentView">
<!-- 组件在 vm.currentview 变化时改变 -->
</component>

keep-alive

keep-alive

<component :is="currentView" keep-alive>
<!-- 非活动组件将被缓存 -->
</component>

activate

钩子

activate

Vue.component('activate-example', {
activate: function (done) {
var self = this
loadDataAsync(function (data) {
self.someData = data
done()
})
}
})

transition-mode

transition-mode

in-out

out-in

<!-- 先淡出再淡入 -->
<component
:is="view"
transition="fade"
transition-mode="out-in">
</component>

.fade-transition {
transition: opacity .3s ease;
}
.fade-enter, .fade-leave {
opacity: 0;
}

杂项

组件和 v-for

v-for

<my-component v-for="item in items"></my-component>

<my-component
v-for="item in items"
:item="item"
:index="$index">
</my-component>

item

v-for

编写可复用组件

v-bind

v-on

<my-component
:foo="baz"
:bar="qux"
@event-a="doThis"
@event-b="doThat">
<!-- content -->
<img slot="icon" src="...">
<p slot="main-text">Hello!</p>
</my-component>

异步组件

Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})

resolve

reject(reason)

setTimeout

Vue.component('async-webpack-example', function (resolve) {
// 这个特殊的 require 语法告诉 webpack
// 自动将编译后的代码分割成不同的块，
// 这些块将通过 ajax 请求自动下载。
require(['./my-async-component'], resolve)
})

资源命名约定

// 在组件定义中
components: {
// 使用 camelCase 形式注册
myComponent: { /*... */ }
}

<!-- 在模板中使用 kebab-case 形式 -->
<my-component></my-component>

// PascalCase
import TextBox from './components/text-box';
import DropdownMenu from './components/dropdown-menu';

export default {
components: {
// 在模板中写作 <text-box> 和 <dropdown-menu>
TextBox,
DropdownMenu
}
}

递归组件

name

var StackOverflow = Vue.extend({
name: 'stack-overflow',
template:
'<div>' +
// 递归地调用它自己
'<stack-overflow></stack-overflow>' +
'</div>'
})

Vue.component()

name

片断实例

template

<div>root node 1</div>
<div>root node 2</div>

<div>
I have a single root node!
<div>node 1</div>
<div>node 2</div>
</div>

<partial>

<router-view>

v-if

v-for

$el

<!-- 不可以，因为没有根元素 -->
<example v-show="ok" transition="fade"></example>

<!-- props 可以 -->
<example :prop="someData"></example>

<!-- 流程控制可以，但是不能有过渡 -->
<example v-if="ok"></example>

内联模板

inline-template

<my-component inline-template>
<p>These are compiled as the component's own template</p>
<p>Not parent's transclusion content.</p>
</my-component>

inline-template

template