组件需要注册后才可以使用。
Vue.component('my-component',{
template:'<div>这是组件内容</div>'
})；
局部注册组件
var Child = { template:'<div>局部注册组件内容</div>' } var app = new Vue({ el:"#app", components: { 'my-component':Child } })
Vue组件模板在某些情况下会受到限制，比如table,ul,ol.select等，这时可以类似这样：
<table>
<tbody is="my-component"></tbody>
</table>
还可使用数据绑定，但data必须是函数：
Vue.component('my-component',{
template:'<div>{{message}}</div>',
data:function(){
return {
message:'局部注册内容，data方法return'
}
}
})
使用props传递数据
<my-component message="来自父组件的信息"></my-component>
Vue.component('my-component',{
props:['message'],
template:'<div>{{message}}</div>'
})
父组件动态数据：
<input type="text" v-model="message"/> <my-component :message="message"></my-component>
Vue.component('my-component',{
props:['message'],
template:'<div>{{message}}</div>'
})
var app = new Vue({
el:"#app",
data:{
message:''
}
})
当输入框输入时，子组件接收到的props "message" 也会实时响应，并更新组件模板。
注意：
如果直接传递数字，布尔值，数组，对象，而不是用v-bind，传递的是字符串。
<my-component message="[1,2,3]"></my-component> <my-component :message="[1,2,3]"></my-component>
Vue.component('my-component',{
props:['message'],
template:'<div>{{message.length}}</div>'
})
此时上一个会输出字符串的长度7，下面才是输出数组的长度3。
单向数据流
父组件传递初始值进来，子组件作为初始值保存，在自己的作用域下可随意修改。
<div id="app">
<my-component :init-count="1"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
props:['initCount'],
template:'<div>{{count}}</div>',
data:function(){
return {
count:this.initCount+1
}
}
})
var app = new Vue({
el:"#app",
data:{
message:''
}
})
</script>
<div id="app">
<my-component :width="100"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
props:['width'],
template:'<div :style="style">组件内容</div>',
computed:{
style:function(){
return {
width:this.width+"px",
background:'red'
}
}
}
})
var app = new Vue({
el:"#app",
data:{
message:''
}
})
</script>
子组件传递数值到父组件：
<div id="app">
<p>总数：{{total}}</p>
<my-component @increase="handleGetTotal" @reduce="handleGetTotal"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
template:'<div><button @click="handleIncrease">+1</button><button @click="handleReduce">-1</button></div>',
data:function(){
return {
counter: 0
}
},
methods:{
handleIncrease:function(){
this.counter++;
this.$emit('increase',this.counter);
},
handleReduce:function(){
this.counter--;
this.$emit('reduce',this.counter);
}
}
});
var app = new Vue({
el:"#app",
data:{
total:0
},
methods:{
handleGetTotal:function(total){
this.total=total
console.log(total)
}
}
});
在子组件定义两个事件，改变自身数据的同时使用$emit来触发父组件的自定义事件名称，从而触发对应的方法，再把改变的数据通过方法传到父组件的方法，从而改变父组件的数据。
使用v-model
<div id="app">
<p>总数：{{total}}</p>
<my-component v-model="total"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
template:'<div><button @click="handleIncrease">+1</button></div>',
data:function(){
return {
counter: 0
}
},
methods:{
handleIncrease:function(){
this.counter++;
this.$emit('input',this.counter);
}
}
});
var app = new Vue({
el:"#app",
data:{
total:0
}
});
</script>
这次区别是$emit通知的是特殊的input，但是并没有在组件上使用@input，这是因为v-model，这也可以称作是一个语法糖。
因为上面的示例可以间接实现：
<my-component @input="total"></my-component>
v-model还可以用来创建自定义的表单输入组件，进行数据双向绑定：
<div id="app">
<p>总数：{{total}}</p>
<my-component v-model="total"></my-component>
<button @click="handleReduce">-1</button>
</div>
<script type="text/javascript">
Vue.component('my-component',{
props:['value'],
template:'<input :value="value" @input="updateValue" />',
methods:{
updateValue:function(event){
this.$emit('input',event.target.value);
}
}
});
var app = new Vue({
el:"#app",
data:{
total:0
},
methods:{
handleReduce:function(){
this.total--;
}
}
});
</script>
子组件input改变value值后出发updateValue，通过$emit触发特殊的input事件，传值输入的value值，改掉父组件的total，父组件的handleReduce方法改变total后，由于是双向绑定，所以子组件的value值也随着改变。
这需要满足两个条件：
1.接收一个props的value值，
2.更新value触发特殊的input事件
非父子组件通信
在vue1.x中是采用$dispatch()和$broadcast()这两个方法。$dispatch()由于向上级派发事件，只要是它的父级，都可在vue实例的events选项内接收。
在vue2.x中废弃了上述两种方法。在vue2.x中推荐使用一个空的vue实例作为中央事件总线(bus)，也就是一个中介。
如下：
<div id="app">
<p>信息：{{message}}</p>
<my-component></my-component>
</div>
<script type="text/javascript">
var bus = new Vue();
Vue.component('my-component',{
template:'<button @click="handleEvent"></button>',
methods:{
handleEvent:function(event){
bus.$emit('on-message','来自组件component的内容');
}
}
});
var app = new Vue({
el:"#app",
data:{
message:''
},
mounted:function(){
var _this = this;
bus.$on('on-message',function(msg){
_this.message=msg;
})
}
});
</script>
定义一个空的vue实例当做中间人，在钩子函数mounted中监听了来自bus的事件on-message，在组件中会点击按钮通过bus把事件on-message发出去，此时app会接收到来自bus的事件。
除了中间介这种方式外，还有两种方法可实现组件间的通信：父链和子组件索引。
父链
子组件中使用this.$parent可直接访问父实例或组件，父组件也可以通过this.$children访问它所有子组件。
<div id="app">
<p>信息：{{message}}</p>
<my-component></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
template:'<button @click="handleEvent">通过$parent改变信息内容</button>',
methods:{
handleEvent:function(event){
this.$parent.message='子组件通过$parent改变了信息内容';
}
}
});
var app = new Vue({
el:"#app",
data:{
message:''
}
});
</script>
子组件内通过this.$parent.message直接修改信息内容，正常使用不推荐使用。因为这样使得父子组件紧耦合，只看父组件，很难理解父组件状态，因为它可能被任意组件修改。最好还是通过props和$emit来通信。
子组件索引
<div id="app">
<button @click="handleRef">通过red获取子组件实例</button>
<my-component ref="Mycom"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
template:'<div>子组件</div>',
data:function() {
return {
message:'子组件内容'
}
}
});
var app = new Vue({
el:"#app",
methods:{
handleRef:function(){
var msg = this.$refs.Mycom.message;
console.log(msg)
}
}
});
</script>
父组件内的内容通过this.$refs.Mycom找到子组件，并输出了子组件的内容。
使用slot分发内容
当需要让组件组合使用，混合父组件发的内容与子组件的模板时，就会用到slot,这个过程叫做内容分发。
slot用法
单个slot: 在子组件标签内的素有内容替代子组件的<slot>标签及它的内容。如下：
<div id="app">
<child-component>
<p>分发的内容</p>
<p>更多分发的内容</p>
</child-component>
</div>
<script type="text/javascript">
Vue.component('child-component',{
template:'<div><slot><p>如果没有父组件插入内容，我将默认出现</p></slot></div>',
});
var app = new Vue({
el:"#app",
});
</script>
当父组件没有插入分发的内容，即上述代码没有
<p>分发的内容</p>
<p>跟多分发的内容</p>
的时候，子组件将默认显示子组件里slot的内容，如果父组件里插入了分发的内容，则将替换掉子组件里slot标签里的全部内容。
具名slot
给slot元素指定一个name后可以分发多个内容，具名slot可以与单个slot共存。
如下：
<div id="app">
<child-component>
<h2 slot="header">标题</h2>
<p>正文内容</p>
<p>更多正文内容</p>
<div slot="footer">底部信息</div>
</child-component>
</div>
<script type="text/javascript">
Vue.component('child-component',{
template:`<div class="container">
<div class="header">
<slot name="header"></slot>
</div>
<div class="main">
<slot></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>`,
});
var app = new Vue({
el:"#app",
});
</script>
在父组件上面可以具名插入slot的name，然后子组件会更具name插入具体的内容。
作用域插槽
是一种特殊的slot使用一个可以复用的模板替换已渲染的元素。
<div id="app">
<child-component>
<template scope="props">
<p>来自父组件的内容</p>
<p>{{props.msg}}</p>
</template>
</child-component>
</div>
<script type="text/javascript">
Vue.component('child-component',{
template:`<div class="container">
<slot msg="来自子组件的内容"></slot>
</div>`,
});
var app = new Vue({
el:"#app",
});
</script>
子组件模板，在slot元素上有一个类似pros传递数据给组件的写法 msg="XXX",将数据传到了插槽。父组件使用了template且拥有一个scope="props"的特性，这里的props知识一个临时变量，通过临时变量props来访问来自子组件的数据msg。渲染的最终结果为：
<div id="app">
<div class="container">
<p>来自父组件的内容</p>
<p>来自子组件的内容</p>
</div>
</div>
作用域插槽具代表性的用例是列表组件，允许组件自定义应该如何渲染列表的每一页。
<div id="app">
<my-list :book="books">
<!--作用域插槽也可以是具名的slot-->
<template slot="book" scope="props">
<li>{{props.bookName}}</li>
</template>
</my-list>
</div>
<script type="text/javascript">
Vue.component('my-list',{
props:{
books:{
type:Array,
default:function(){
return [];
}
}
},
template:'<ul><slot name="book" v-for="book in books" :bookName="book.name"></slot></ul>',
});
var app = new Vue({
el:"#app",
data:{
books:[
{name:'js'},
{name:'css'},
{name:'html'}
]
}
});
</script>
子组件my-list接收一个来自父级的prop数组books,并且将它在name为book的slot上使用v-for指令循环，同时暴露一个变量bookName。
访问slot
vue2.x提供了用来访问被slot分发的内容的方法$slots。
<div id="app">
<my-component>
<h2 slot="header">标题</h2>
<p>正文内容</p>
<div slot="footer">底部信息</div>
</my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
template:`<div class="container">
<div class="header">
<slot name="header"></slot>
</div>
<div class="main">
<slot></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>`,
mounted:function(){
var header = this.$slots.header;
var main = this.$slots.default;
var footer = this.$slots.footer;
console.log(footer[0].elm.innerHTML)
}
});
var app = new Vue({
el:"#app",
});
</script>
在子组件钩子函数中能用$slots得到对应的slot。
组件的高级用法
递归组件
组件可以在它的模板内调用自己，只要给组件设置name属性就可以。
<div id="app">
<my-component :count="1"></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
name:'my-component',
props:{
count:{
type:Number,
default:function(){
return 1;
}
}
},
template:'<div class="child"><my-component :count="count+1" v-if="count<3"></my-component></div>',
});
var app = new Vue({
el:"#app",
});
</script>
设置name后就可以递归使用了，不过需要一个限制条件，不然会报错。
内联模板
vue提供了一个内敛模板的功能，在使用组件时，给组件标签使用inline-template特性，组件就会把它的内容当做模板，而不是把它当内容分发。
<div id="app">
<my-component inline-template>
<div>
<h2>父组件定义子组件模板</h2>
<p>{{message}}</p>
<p>{{msg}}</p>
</div>
</my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',{
data:function(){
return {
msg:'子组件内容'
}
}
});
var app = new Vue({
el:"#app",
data:{
message:'父组件内容'
}
});
</script>
渲染成：
<div> <h2>父组件定义子组件模板</h2> <p>父组件内容</p> <p>子组件内容</p> </div>
使用内联模板会导致作用域混淆，应避免使用。
动态组件
vue.js提供了一个特殊的元素<component>用来动态挂载不同的组件，使用is特性来选择挂载的组件。
<div id="app">
<component :is="currentView"></component>
<button @click="handleChangeView('A')">切换到A</button>
<button @click="handleChangeView('B')">切换到B</button>
<button @click="handleChangeView('C')">切换到C</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
components:{
comA:{
template:'<div>A模板</div>'
},
comB:{
template:'<div>B模板</div>'
},
comC:{
template:'<div>C模板</div>'
},
},
data:{
currentView:'comA',
},
methods:{
handleChangeView:function (component){
this.currentView='com'+component
}
}
});
</script>
动态地改变currentView就可以切换视图。
异步组件
当工程足够大，使用组件足够多时，是时候考虑下性能了，因为一开始把所有组件都加载时时一笔开销。vue.js允许将组件定义为一个工厂函数，动态地解析组件。
<div id="app">
<my-component></my-component>
</div>
<script type="text/javascript">
Vue.component('my-component',function(resolve,reject){
setTimeout(()=>{
resolve({
template:'<div>我是异步渲染的</div>'
})
},2000)
});
var app = new Vue({
el:"#app",
});
</script>
$nextTick
当v-if，动态切换显示时，直接去取div的内容时获取不到的，因为此时div还没有被创建出来。这里涉及到一个vue的重要概念：异步更新队列。
vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一事件循环中发生的数据变化。
$nextTick就是用来知道DOM什么时候更新好的。
X-template
没有使用webpack，gulp等工具，组件内容复杂，如果都在javascript中拼接字符串，效率很低，vue提供了另一种定义模板的方式，在script标签使用text/template类型，指定一个ID，将这个id赋给template。
<div id="app">
<my-component></my-component>
<script type="text/x-template" id="my-component">
<div>这是组件内容</div>
</script>
</div>
<script type="text/javascript">
Vue.component('my-component',{
template:"#my-component"
});
var app = new Vue({
el:"#app",
});
</script>
vue的初衷不是滥用它，因为它将模板和组件的其他定义隔离了。