元件化：

　　 任何應用都會被抽象成一種樹結構

主見使用三步驟

1.建立元件構造器 呼叫Vue.extend()建立元件構造器

2.註冊元件　　呼叫Vue.component('a','b')方法註冊元件 :一個引數a-註冊元件的標籤名；另一個引數b-元件構造器名稱

3.使用元件　　在Vue例項的作用範圍內使用元件

 <template id="cpn"></template>

Vue.component('cpn', {

template:'#cpn', 

data() {

return {}},
methods: {

add(){},

app(){}}

})
 

其中data等必須是一個函式，這樣才能保證元件之間互不影響

父子元件的通訊

　　父向子傳遞

props:{
//型別限制
cmovies：Array，//限制陣列型別
cmovie：[String,Number]，//限制多個型別
cmessage：{
type：String，//限制字串型別的值
default：‘aaa’//預設值一般型別
//defailt：function（）{//預設值為陣列或者物件必須工廠函式獲取
//return {}
//}
required：true//必傳值，必填字串
validator：function（）{
return ['success', 'warning'].indexOf(value) !== --1
 

//自定義驗證函式
}
}
}

注意：props在父級傳遞不能使用駝峰命名。此處vue版本v2.6.12

 1 <div id='app'>
 2      <cpn :c-info='info'></cpn> //這裡要是注意寫法，不能使用cInfo
 3 </div>
 4 
 5  <template id="cpn">
 6      <div>
 7       <h3>{{ cInfo }}</h3>
 8     </div>
 9    </template>
10<scriptsrc="js/vue.js"></script>

11
 
  Vue.component("cpn", {

12    template: '#cpn',
13    props:{
14     cInfo: {
15          type:Object,
16          default(){
17            return {}
18          }
19        }
20    }
21  })
22 const app = new Vue({
23     el:"#app",
24     data: {
25       info: {
26         name:'Hao',
27         age: 26,
28         height: 1.80
29       }
30     }
31 })

子元件向父元件傳遞資料：自定義事件

流程;

　　在子元件中，通過$emit()來觸發事件。

　　在父元件中，通過v-on來監聽子元件的事件。

<div id="app">
    <cpn @counter-click="cpnClick"></cpn>
</div>

  <template id="cpn">
     <div>
      <button @click="add">++</button>    
    </div>
   </template>
// 子元件
Vue.component("cpn", {
   template: '#cpn',
   data() {
    
   },
   props:{
   },
   methods: {
     add() {
        //發射事件：自定義事件。後面可以新增變數
       this.$emit('counter-click')
     }
   }
 })
//父元件
const app = new Vue({
    el:"#app",
     methods: {
        cpnClick() {
          console.log(99)
        }
      }
  })

父子元件訪問方式