vue从入门到进阶：组件Component详解（六）

一.什么是组件？

is

Vue 组件

Vue 的实例

二.注册组件

全局注册

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

// 注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
var vm = new Vue({
el: '#example',
data: {

}
})

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

Vue.extend()

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

// 注册
Vue.component('my-component', MyComponent);
var vm = new Vue({
el: '#example',
data: {

}
})

Vue.extend()使用说明

Vue.extend( options )

{Object} options

包含组件选项的对象

data

Vue.extend()

函数

<div id="mount-point"></div>

// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

<p>Walter White aka Heisenberg</p>

vm.$mount()

vm.$mount( [elementOrSelector] )使用说明

{Element | string} [elementOrSelector]

{boolean} [hydrating]

vm

Vue

el

未挂载

DOM

vm.$mount()

elementOrSelector

原生DOMAPI 

var MyComponent = Vue.extend({
template: '<div>Hello!</div>'
})

// 创建并挂载到 #app (会替换 #app)
new MyComponent().$mount('#app')

// 同上
new MyComponent({ el: '#app' })

// 或者，在文档之外渲染并且随后挂载
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

局部注册

var Child = {
template: '<div>A custom component!</div>'
}

new Vue({
// ...
components: {
// <my-component> 将只在父组件模板中可用
'my-component': Child
}
})

指令

DOM 模板解析注意事项

<ul>、<ol>、<table>、<select>

<option>

<table>
<my-row>...</my-row>
</table>

<my-row>

is

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

<script type="text/x-template">

JavaScript

.vue

data 必须是函数

Vue.component('my-component', {
template: '<span>{{ message }}</span>',
data: {
message: 'hello'
}
})

data

<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>

vardata= { counter: 0 }

Vue.component('simple-counter', {
template: '<button v-on:click="counter+= 1">{{ counter}}</button>',
// 技术上data的确是一个函数了，因此 Vue 不会警告，
// 但是我们却给每个组件实例返回了同一个对象的引用
data: function () {
return data
}
})

new Vue({
el: '#example-2'
})

共享

data

counter

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

三.Prop

prop

事件

prop

事件

使用 Prop 传递数据

Vue.component('child', {
// 声明props
props: ['message'],
// 就像data一样，prop 也可以在模板中使用
// 同样也可以在 vm 实例中通过 this.message 来使用
template: '<span>{{ message }}</span>'
})

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

hello!

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

<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"></child>

动态 Prop

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

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

（重要）

对象

属性

v-bind

todo

todo: {
text: 'Learn Vue',
isComplete: false
}

<todo-item v-bind="todo"></todo-item>

<todo-item
v-bind:text="todo.text"
v-bind:is-complete="todo.isComplete"
></todo-item>

字面量语法 vs 动态语法

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

prop

v-bind

JavaScript 表达式

<!-- 传递真正的数值 -->
<comp v-bind:some-prop="1"></comp>

单向数据流

不应该

prop

props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}

props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}

对象

数组

同一个内存空间

会影响

Prop 验证

对象的形式

不能用字符串数组

Vue.component('example', {
props: {
// 基础类型检测 (`null` 指允许任何类型)
propA: Number,
// 可能是多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数值且有默认值
propD: {
type: Number,
default: 100
},
// 数组/对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})

type

type

instanceof

prop 

default

validator

data

computed

methods

Vue.component('modal', {
template: '#modal-template',
props: {
show: {
type: Boolean,
required: true,
twoWay: true
}
}
});

twoWay Prop

移除

四.非Prop特性

组件可以接收任意传入的特性

根元素上

<bs-date-input data-3d-date-picker="true"></bs-date-input>

data-3d-date-picker="true"

bs-date-input

<input type="date" class="form-control">

<bs-date-input
data-3d-date-picker="true"
class="date-picker-theme-dark"
></bs-date-input>

五.自定义事件

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

EventTarget API

$on

$emit

addEventListener

dispatchEvent

v-on

<div id="counter-event-example">
<p>{{ total }}</p>
<button-counterv-on:increment="incrementTotal"></button-counter>
<button-counterv-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter}}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter+= 1
this.$emit('increment')
}
},
})

new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})

给组件绑定原生事件.native

.native

<my-component v-on:click.native="doTheThing"></my-component>

.sync 修饰符(2.3.0+)

<comp :foo.sync="bar"></comp>

<comp :foo="bar" @update:foo="val => bar = val"></comp>

this.$emit('update:foo', newValue)

使用自定义事件的表单输入组件

<input v-model="something">

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

<custom-input
v-bind:value="something"
v-on:input="something = arguments[0]">
</custom-input>

valueprop

input

<div id="app">
<custom-input v-model="something"></custom-input>
<br/>
{{something}}
</div>

// 注册
Vue.component('custom-input', {
props:['something'],
template: '<input type="text"  v-bind:value="something" v-on:input="updateValue($event.target.value)"/>',
methods:{
updateValue:function(value){
this.$emit('input', value)
}
}
})
var vm = new Vue({
el: '#app',
data: {
something:''
}

})

<currency-input v-model="price"></currency-input>

Vue.component('currency-input', {
template: '\
<span>\
$\
<input\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
>\
</span>\
',
props: ['value'],
methods: {
// 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
updateValue: function (value) {
var formattedValue = value
// 删除两侧的空格符
.trim()
// 保留 2 位小数
.slice(
0,
value.indexOf('.') === -1
? value.length
: value.indexOf('.') + 3
)
// 如果值尚不合规，则手动覆盖为合规的值
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// 通过 input 事件带出数值
this.$emit('input', Number(formattedValue))
}
}
})

<div id="app">
<currency-input
label="Price"
v-model="price"
></currency-input>
<currency-input
label="Shipping"
v-model="shipping"
></currency-input>
<currency-input
label="Handling"
v-model="handling"
></currency-input>
<currency-input
label="Discount"
v-model="discount"
></currency-input>

<p>Total: ${{ total }}</p>
</div>

Vue.component('currency-input', {
template: '\
<div>\
<label v-if="label">{{ label }}</label>\
$\
<input\
ref="input"\
v-bind:value="value"\
v-on:input="updateValue($event.target.value)"\
v-on:focus="selectAll"\
v-on:blur="formatValue"\
>\
</div>\
',
props: {
value: {
type: Number,
default: 0
},
label: {
type: String,
default: ''
}
},
mounted: function () {
this.formatValue()
},
methods: {
updateValue: function (value) {
var result = currencyValidator.parse(value, this.value)
if (result.warning) {
this.$refs.input.value = result.value
}
this.$emit('input', result.value)
},
formatValue: function () {
this.$refs.input.value = currencyValidator.format(this.value)
},
selectAll: function (event) {
// Workaround for Safari bug
// http://stackoverflow.com/questions/1269722/selecting-text-on-focus-using-jquery-not-working-in-safari-and-chrome setTimeout(function () {
event.target.select()
}, 0)
}
}
})

new Vue({
el: '#app',
data: {
price: 0,
shipping: 0,
handling: 0,
discount: 0
},
computed: {
total: function () {
return ((
this.price * 100 +
this.shipping * 100 +
this.handling * 100 -
this.discount * 100
) / 100).toFixed(2)
}
}
})

自定义组件的 v-model（2.2.0 新增）

Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean,
// 这样就允许拿 `value` 这个prop 做其它事了
value: String
},
// ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

<my-checkbox
:checked="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>

checked

prop

<div id="app">
<my-checkbox v-model="foo" value="some value"></my-checkbox>
{{foo}}
</div>

Vue.component('my-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean,
// 这样就允许拿 `value` 这个prop 做其它事了
value: String
},
template:'<input type="checkbox" @change="changefun(ischecked)"/>',
data:function(){
return {
ischecked:this.checked
}
},
methods:{
changefun(state){
this.ischecked = !state;
this.$emit('change', this.ischecked);
}
}
})
var vm = new Vue({
el: '#app',
data: {
foo:false
}

})

非父子组件的通信

var bus = new Vue()

// 触发组件 A 中的事件
bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})

Vuex

<div id="app">
<comp-a v-on:id-selected="getdate"></comp-a>
<comp-b></comp-b>
</div>

var bus = new Vue();

Vue.component('comp-a', {
template:'<button class="compa" @click="comfuna">组件A</button>',
data:function(){
return {

}
},
methods:{
comfuna(){
bus.$emit('id-selected', 1);
this.$emit('id-selected', 1);
}
}
})
Vue.component('comp-b', {
template:'<div class="compb">组件B</div>',
data:function(){
return {

}
},
mounted(){
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
console.log('在B组件中得到的值：'+id);
})
}

})
var vm = new Vue({
el: '#app',
data: {},
methods:{
getdate(value){
console.log('得到当前的值：'+value);
}
}

})

六.使用插槽slot分发内容

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

<app>

<app>

<app>

<slot>

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

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

单个插槽

<div>
<h2>我是子组件的标题</h2>
<slot>
只有在没有要分发的内容时才会显示。
</slot>
</div>

<div>
<h1>我是父组件的标题</h1>
<my-component>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>
</div>

<div>
<h1>我是父组件的标题</h1>
<div>
<h2>我是子组件的标题</h2>
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</div>
</div>

具名插槽

<slot>

name

slot

<div class="container">
<header>
<slotname="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slotname="footer"></slot>
</footer>
</div>

<app-layout>
<h1 slot="header">这里可能是一个页面标题</h1>

<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>

<p slot="footer">这里有一些联系信息</p>
</app-layout>

<div class="container">
<header>
<h1>这里可能是一个页面标题</h1>
</header>
<main>
<p>主要内容的一个段落。</p>
<p>另一个主要段落。</p>
</main>
<footer>
<p>这里有一些联系信息</p>
</footer>
</div>

作用域插槽(2.1.0 新增)

<div class="child">
<slot text="hello from child"></slot>
</div>

slot-scope

<template>

slot-scope

prop

<div class="parent">
<child>
<template slot-scope="props">
<span>hello from parent</span>
<span>{{props.text }}</span>
</template>
</child>
</div>

<div class="parent">
<div class="child">
<span>hello from parent</span>
<span>hello from child</span>
</div>
</div>

2.5.0+

slot-scope

不再局限于<template>

<my-awesome-list :items="items">
<!-- 作用域插槽也可以是具名的 -->
<li
slot="item"
slot-scope="props"
class="my-fancy-item">
{{props.text }}
</li>
</my-awesome-list>

<ul>
<slotname="item"
v-for="item in items"
:text="item.text">
<!-- 这里写入备用内容 -->
</slot>
</ul>

slot-scope

<child>
<span slot-scope="{ text }">{{ text }}</span>
</child>

七.动态组件

<component>

is

var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})

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

var Home = {
template: '<p>Welcome home!</p>'
}

var vm = new Vue({
el: '#example',
data: {
currentView: Home
}
})

keep-alive

keep-alive

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

八.杂项

编写可复用组件

Prop

事件

插槽

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

子组件引用

ref

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

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

ref

v-for

$refs

$refs

异步组件

Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 将组件定义传入 resolve 回调函数
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})

resolve

reject(reason)

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

Vue.component(
'async-webpack-example',
// 该 `import` 函数返回一个 `Promise` 对象。
() => import('./my-async-component')
)

new Vue({
// ...
components: {
'my-component': () => import('./my-async-component')
}
})

高级异步组件(2.3.0 新增)

const AsyncComp = () => ({
// 需要加载的组件。应当是一个 Promise
component: import('./MyComp.vue'),
// 加载中应当渲染的组件
loading: LoadingComp,
// 出错时渲染的组件
error: ErrorComp,
// 渲染加载中组件前的等待时间。默认：200ms。
delay: 200,
// 最长等待时间。超出此时间则渲染错误组件。默认：Infinity
timeout: 3000
})

vue-router

vue-router 2.4.0 以上

组件命名约定

// 在组件定义中
components: {
// 使用 kebab-case 注册
'kebab-cased-component': { /* ... */ },
// 使用 camelCase 注册
'camelCasedComponent': { /* ... */ },
// 使用 PascalCase 注册
'PascalCasedComponent': { /* ... */ }
}

<!-- 在 HTML 模板中始终使用 kebab-case -->
<kebab-cased-component></kebab-cased-component>
<camel-cased-component></camel-cased-component>
<pascal-cased-component></pascal-cased-component>

components: {
'kebab-cased-component': { /* ... */ },
camelCasedComponent: { /* ... */ },
PascalCasedComponent: { /* ... */ }
}

<kebab-cased-component></kebab-cased-component>

<camel-cased-component></camel-cased-component>
<camelCasedComponent></camelCasedComponent>

<pascal-cased-component></pascal-cased-component>
<pascalCasedComponent></pascalCasedComponent>
<PascalCasedComponent></PascalCasedComponent>

递归组件

name

name: 'unique-name-of-my-component'

Vue.component

ID

name

Vue.component('unique-name-of-my-component', {
// ...
})

name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'

v-if

false

组件间的循环引用

tree-folder

<p>
<span>{{ folder.name }}</span>
<tree-folder-contents :children="folder.children"/>
</p>

<ul>
<liv-for="child in children">
<tree-folderv-if="child.children" :folder="child"/>
<span v-else>{{ child.name }}</span>
</li>
</ul>

Failed to mount component: template or render function not defined.

beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue')
}

X-Template

text/x-template

<script type="text/x-template" id="hello-world-template">
<p>Hello hello hello</p>
</script>

Vue.component('hello-world', {
template: '#hello-world-template'
})

对低开销的静态组件使用

v-once

Vue.component('terms-of-service', {
template: '\
<div v-once>\
<h1>Terms of Service</h1>\
...很多静态内容...\
</div>\
'
})