一、组件的注册
组件的注册有两种方式：
全局注册
示例代码：
Vue.component('my-component',{
// 选项
})
my-component就是注册的组件的自定义标签名称，之后就可以使用
<my-component></my-component>来使用组件了。
要在父实例中使用这个组件，必须要在实例创建前注册。
代码如下：
<div id=” app ” >
<my-component></my-component>
</div>
<script>
Vue. component ('my-component ’,{
//选项
} ) ；
var app =new Vue({
el :’#app ’
})
</script>
局部注册
<div id='app'>
<my-component></my-component>
</div>
<script>
var child = {
template:'<div>局部注册组件的内容</div>'
}
var app = new Vue({
el:"#app",
components:{
'my-component':child
}
})
</script>
注意事项：Vue组件的模板在某些情况下会收到HTML的限制
eg：在<table>标签内规定只能是如<tr><td>这样的表格元素。所以直接在<table>内使用组件是无效的。
解决办法：可以用特殊的is属性来挂载组件
eg：
<div id=” app” >
<table>
<tbody is=”my-component” ></tbody>
</ table>
</div>
除了template选项，组件还可以像Vue实例那样使用其他选项，比如data,computed,methods等，但是，在使用data时，实例和组件稍有差别，组件的data必须是函数，把数据return 出去，eg：
Vue.component ( 'my-component ', {
template :'<div>{{ message ) ) </div>',
data : function () {
return {
message : '组件内容'
}
}
});
Javascript对象是引用关系，所以如果return 出的对象引用了外部的一个对象，这个对象就是共享的，任何一方修改都会同步。解决办法：可以用内部data的return出来的数据
eg：
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
Vue.component("my-component",{
template:'<button @click="count++">{{count}}</button>',
data:function(){
return {
count:0
};
}
})
var app = new Vue({
el:"#app",
})
</script>
使用props传递数据
组件不仅仅是要完成模板的复用，还要能够实现组件之间的通信。
通常：父组件的模板中包含子组件，父组件要正向的向子组件传递数据或参数，子组件收到后根据参数的不同来渲染不同内容或执行操作。这个正向传递数据的过程就是通过props来实现的。
在组件中，使用选项props来声明需要从父级接受的数据，props的值可以是两种，一种是字符串数组，一种是对象。
字符串数组方法：
<v-com message = "来自父组件的数据"></v-com>
Vue.component("v-com",{
props:["message"],
template:'<div>{{message}}</div>'
})
渲染结果：
<div>来自父组件的数据</div>
props中声明的数据和组件data函数return的数据主要区别就是props的来自父级，而data中的数据是组建自己的数据，作用域是组件本身，这两种数据都可以在组件的template、methods以及computed中使用。
注意：由于HTML特性不区分大小写，所以props为驼峰命名，而标签中则是用 “-” 隔开。
有时候，传递的数据不是写死的，而是来自父级的动态数据。我们希望当父级组件的数据变化时，也会传递给子组件，那个就可以用指令 v-bind来动态绑定props的值。
eg：
<input type="text" v-model="parentData">
<v-c v-bind:message = "parentData"></v-c>
<script>
Vue.component("v-c",{
props:['message'],
template:'<div>{{message}}</div>'
})
var app = new Vue({
el:"#app",
data:{
parentData:''
}
})
</script>
//这样就可以做到，在input框里动态输入的数据，可以动态呈现在下方的div里
注意：如果要传递数字，布尔值，数组，对象，而且不使用v-bind的话，那么传递的仅仅是字符串。
注意：在javascript中对象和数组是引用类型，指向同一个内存空间，所赖以props是对象和数组时，在子组件内改变是会影响父组件的。
对象方法：
当props需要验证时，就需要对象写法。
一般你的组件需要提供给别人使用时，推荐都进行数据验证。
eg：某个数据必须是数字类型，如果传入字符串，就会在控制台弹出警告（只有开发环境版本下会弹出，生产环境下不会）
组件通信
Vue组件通信的示意图
组件关系可以分为父子组件通信、兄弟组件通信、跨级组件通信。
自定义事件
当子组件需要向父组件传递数据时，就要用到自定义事件。
在Vue中，子组件用 $emit()来触发事件，父组件用$on()来监听子组件的事件。
父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件，
eg：
<div id="app">
<p>总数：{{totol}}</p>
<my-com
@changetotol="handleGetTotol"
></my-com>
</div>
<script>
Vue.component("my-com",{
template:'\
<div>\
<button @click="add">+1</button>\
<button @click="reduce">-1</button>\
</div>',
data:function(){
return{
counter:0
}
},
methods:{
add:function(){
this.counter++;
this.$emit('changetotol',this.counter); //相当于，
//this.counter就是changetotol所绑定的函数
//的参数，即，this.counter是handleGetTotol的参数。
},
reduce:function(){
this.counter--;
this.$emit('changetotol',this.counter);
}
}
})
var app = new Vue({
el:"#app",
data:{
totol:0
},
methods:{
handleGetTotol:function(totol){
this.totol = totol
}
}
})
</script>
其它组件通信手段：
bus
在Vue2.x中，推荐使用一个空的Vue实例作为中央事件总线（bus），也就是一个中介。
eg:
<div id="app">
{{message}}
<br>
<my-com></my-com>
</div>
<script>
let bus = new Vue()
Vue.component("my-com",{
template:"<button v-on:click='eventPost'>事件传递</button>",
methods:{
eventPost:function(){
//给bus实例一个事件：“on-message”
bus.$emit("on-message","data from my-com")
}
}
});
var app = new Vue({
el:"#app",
data:{
message:""
},
methods:{
},
mounted:function(){
//这里的this指向app,所以提前赋一个that给他
var that = this;
//在实例初始化的时候，监听来自bus实例的事件
bus.$on('on-message',function(msg){
//这个this指向bus，要用message的话不能用this
that.message = msg;
})
}
})
</script>
思路：
在组件中，给空实例bus一个事件，让bus充当媒介的身份，在app初始化时，监听来自bus的事件。
如果需要深入使用，可以扩展bus实例。那么，只需要在初始化时让bus获取一次，那么任何时间，任何组件就都可以从中使用了。这个在单页面富应用（SPA）中很实用。
父链
在子组件，使用this.$parent可以直接访问该组件的父实例或组件，父组件也可以通过this.$children访问它的所有子组件，而且可以递归或者向上向下无限访问，直到根实例或最内层的组件
子组件索引
当子组件很多时，通过this.$children遍历这些子组件变得不现实，于是，我们可以同过特殊属性ref来为子组件指定一个索引名称。
eg:
<button @click = 'getChildData'>通过ref获取子组件实例</button>
<br>
{{data1}}
<br>
{{data2}}
<v-com ref = 'comA'></v-com>
<v-com ref = 'comB'></v-com>
</div>
<script>
Vue.component("v-com",{
template:'<div></div>',
data:function(){
return{
msg1:'1',
msg2:'2'
}
},
});
let app = new Vue({
el:"#app",
data:{
data1:"",
data2:''
},
methods:{
getChildData:function(){
this.data1 = this.$refs.comA.msg1;
this.data2 = this.$refs.comB.msg2;
}
}
})
</script>
注：它应该仅仅作为一个直接访问子组件的应急方案，应该避免在模板或计算属性中使用$refs
使用slot分发内容
当需要让组件组合使用，混合父组件的内容与子组件的模板时，就会用到slot.
props传递数据，events触发事件和slot内容分发就构成了Vue组件的3个API来源，再复杂的组件也是由这3部分构成的。
作用域概念：在html中子组件的标签上写的属性，绑定的是父组件的数据，如果想绑定子组件的数据，那么改属性应该写在构建组件时的template中。
因此：slot分发的内容，作用域是在父组件上的。
watch
用于为component添加监听，当被监听的值发生改变，就会触发相应的函数。函数默认有两个参数，第一个是新值，第二个是原来的值。
网友评论