元件

　　元件是可複用的 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>