组件
推荐使用小写加减号分割的形式命名。
一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
有些元素内不允许出现不符合规定的元素
使用特殊的is属性来在挂载组件
<table>
<tbody is=”my-component” ></tbody>
</ table>
动态组件：用component标签定义一个组件，绑定一个is，type数据对应的是哪个子组件名，就显示哪个子组件
<component :is=”type”></component>
v-once 在子组件的模板里写上，可以在切换组件显示时将子组件加入缓存，而不是删除，来减少内存消耗
在动态组件上使用 keep-alive
<!– 失活的组件将会被缓存！–>
<keep-alive>
<component v-bind:is=”currentTabComponent”></component>
</keep-alive>
全局注册，可以在任何实例里使用,全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生
Vue.component(‘button-counter’, {
data() {
return {
count: 0
}
},
template: ‘<button v-on:click=”count++”>You clicked me {
{ count }} times.</button>’
})
局部注册，只能在使用局部组件的实例里使用
var ComponentA = { /* … */ } //在本页面定义
import ComponentA from ‘./ComponentA’ //导入另一个组件文件
var ComponentB = {
components: {
‘component-a’: ComponentA
},
// …
}
基础组件的自动化全局注册https://cn.vuejs.org/v2/guide/components-registration.html，解决每次都要导入很多基础组件
组件传值
父组件的数据通过 Prop 向子组件传递数据
可以直接在标签里传值， 也可以在父组件定义data，实现动态绑定
直接传值
<div id=”app”>
<child message=”hello!”></child>
</div>
动态绑定传值
<div id=”app”>
<div>
<child v-bind:message=”parentMsg”></child>
</div>
</div>
子组件
Vue.component(‘child’, {
props: [‘message’],
template: ‘<span>{
{ message }}</span>’
})
// 创建根实例
new Vue({
el: ‘#app’,
data: {
parentMsg: ‘父组件内容’
}
})
</script>
Props使用对象类型，可以添加额外的验证功能
Vue.component(‘example’, {
props: {
message: {[String, Number],
required: true,
default: 100,
validator: function (value) {
return value > 10
}
}
}
})
传入一个对象的所有属性
使用不带参数的 v-bind (取代 v-bind:prop-name)
post: {
id: 1,
title: ‘My Journey with Vue’
}
<blog-post v-bind=”post”></blog-post>
自定义事件 子传父
在子组件上绑定一个事件，触发this.$emit(‘increment’)，调用父组件的事件increment的incrementTotal方法
<div id=”app”>
<div id=”counter-event-example”>
<p>{
{ total }}</p>
<button-counter v-on:increment=”incrementTotal”></button-counter>//在组件上绑定事件监听
<button-counter v-on:increment=”incrementTotal”></button-counter>//在组件上绑定事件监听
</div>
</div>
<script>
Vue.component(‘button-counter’, {
template: ‘<button v-on:click=”incrementHandler”>{
{ counter }}</button>’,
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1
this.$emit(‘increment’)//可以增加参数传递给父组件
}
},
})
new Vue({
el: ‘#counter-event-example’,
data: {
total: 0
},
methods: {
incrementTotal: function () {//可以接受子组件传递的参数
this.total += 1
}
}
})
</script>
原生事件
在子组件上@click.native=”handle”可以绑定原生事件，而不用通过子组件来触发父组件上的事件
插槽
在组件中添加和命名插槽
<div class=”container”>
<header>
<slot name=”header”></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name=”footer”></slot>
</footer>
</div>
向具名插槽提供内容的时候，我们可以在一个 <template> 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
<base-layout>
<template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here’s some contact info</p>
</template>
</base-layout>
异步组件???
在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问
$parent 属性可以用来从一个子组件访问父组件的实例
refs
<input ref=”input”>
ref挂载在组件上，可以在父元素内获得组件的实例
ref挂载在元素上，可以获得dom元素对象
this.$refs.input.focus()
$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
程序化的事件侦听器
通过 $on(eventName, eventHandler) 侦听一个事件
通过 $once(eventName, eventHandler) 一次性侦听一个事件
通过 $off(eventName, eventHandler) 停止侦听一个事件