组件
组件是可复用的 Vue 实例，且带有一个名字，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。组件将css、js、html封装到一起。直接引用使用。
全局组件
1 <div id="app">
2 <demo></demo>
3 <demo></demo>
4 <demo></demo>
5 </div>
6
7 //全局组件 8 Vue.component('demo',{ 9 template:'<h1 @click="change">{{msg}}</h1>', 10 //组件中data必须是方法 return属性值 11 data:function () { 12 return { 13 msg:'msg'
14 } 15 }, 16 methods:{ 17 change:function () { 18 this.msg = 'test'
19 } 20 } 21 }); 22 new Vue({ 23 el:'#app'
24 })
组件中的data属性必须是一个函数，这样可以根据作用域将每个组件的数据进行隔离，不会出现多组件复用，数据相同的问题。
组件中的props属性可以接收组件在引用时传递的变量
组件中的template，模板属性
父组件：vue实例化接管的div 就是父组件
子组件：在父组件即app 这个div标签内部引用了全局组件中定义的组件，即为子组件
refs用法：通过给标签定义ref属性
1 <div id="app">
2 <div ref="test">ref=test</div>
3 <input type="button" value="test" @click="change">
4 </div>
5
6 new Vue({ 7 el:'#app', 8 data:{ 9 }, 10 methods:{ 11 change:function () { 12 this.$refs.innerText = '已被修改'
13 } 14 } 15 })
refs类似与dom操作的document.getElementByID的操作，可以获取到元素的属性（能获取就能修改），但是由于Vue中都是对于data数据进行操作，一般用来和组件一起使用
运用的例子：两个子组件和一个父组件，点击子组件的数字，子组件数字自增1，点击修改button实现点击两个子组件数字相加
1 <div id="app">
2 <test ref="a"></test>
3 <test ref="b"></test>
4 //父组件只能使用父组件的data.count属性 5 <div>父组件--<span>{{count}}</span></div>
6 <input type="button" value="test" @click="change">
7 </div>
8
9 //全局组件 10 Vue.component('test',{ 11 template:'<div>子组件--<span @click="add">{{number}}</span></div>', 12 data:function () { 13 return{ 14 number:0 15 } 16 }, 17 methods:{ 18 add:function () { 19 this.number++
20 } 21 } 22 }); 23 new Vue({ 24 el:'#app', 25 data:{ 26 count:0 27 }, 28 methods:{ 29 change:function () { 30 this.count = this.$refs.a.number +this.$refs.b.number; 31 } 32 } 33 })
父子组件交互（子组件触发父组件）
实现一个例子：两个子组件一个父组件，点击子组件数字，子组件数字自增1，子组件每次变化，父组件的数字都自动将两个子组件数字相加，即子组件变化自动触发父组件
1 <div id="app">
2 <demo @xxxx="addCount"></demo>
3 <demo @xxxx="addCount"></demo>
4 <div>父组件--<span>{{count}}</span></div>
5 </div>
6 <script src="../js/vue.js"></script>
7 <script>
8 Vue.component('demo',{ 9 template:'<div>子组件---<span @click="add">{{num}}</span></div>', 10 data:function () { 11 return{ 12 num:0 13 } 14 }, 15 methods:{ 16 add:function () { 17 this.num++; 18 //子组件向父组件触发xxxx事件,且可以向父组件传递多个子组件参数 19 this.$emit('xxxx',this.num) 20 } 21 } 22 }); 23 new Vue({ 24 el:'#app', 25 data:{ 26 count:0 27 }, 28 methods:{ 29 addCount:function (num) { 30 this.count += num 31 } 32 } 33 }) 34 </script>