元件

元件開發的好處

封裝功能程式碼，提升開發效率
便於團隊分工合作

元件的建立方式（三種）

注意：1.模板template中只能有一個根節點。2.元件名字如果採用駝峰命名，需要加上連字元‘-’，比如元件名為indexA 標籤名為 index-a

1.使用Vue.extend()和Vue.component()兩個方法建立全域性元件

• Vue.extend()會返回一個元件的構造器，引數為一個物件，是一些配置項
• Vue.component()會利用Vue.extend()返回的構造器建立一個元件例項，兩個引數，一個是元件名字，一個是元件的構造器

// 使用元件(在vue例項控制的區域)
 

<my-index></my-index>
let index = Vue.extend({
// 指定元件的模板
    template: '<div>首頁</div>'
})
// 建立一個全域性元件 my-index
Vue.component('my-index', index)

2.直接使用Vue.component()建立(本質上還是要呼叫Vue.extend()方法)

// 2.使用元件
<index></index>
// 1.建立元件
Vue.component('index',{
    template: '<div>首頁</div>'
 

})

3.通過指定模板建立

// 2.定義模板(需要在vue例項管轄範圍之外)
<template id="tpl">
    <div>首頁</div>
</template>
// 3.引用元件(在vue例項管轄範圍內)
<index></index>
// 1.建立元件
Vue.component('index', {
    template: '#tpl'

})

注意：構造Vue例項傳入的各種選項大多數都可以在元件中使用，但data必須是一個函式(返回一個物件)

父子元件建立

• 通過components屬性建立子元件

// 引用元件
<father></father>
// 建立元件
Vue.component('father',{
    template: '<div> <p>父元件</p> <son></son></div>',
    // 通過components屬性建立子元件
    components: {
        //建立一個子元件
        son: {
            template: '<p>子元件</p>'
        }
    }

})

父元件傳值給子元件

父元件怎麼傳值？（通過屬性繫結傳值）
子元件怎麼接受？(通過props獲取屬性值)

1.宣告props，用來接收從父元件傳遞過來的值

• props能夠獲取當前元件身上屬性對應的屬性值
• props可以跟一個數組，數組裡面的值是一個字串，這個字串可以當屬性

2.在使用子元件的地方，通過v-bind指令給子元件中的props賦值

// 引用元件
<father></father>
// 建立元件
Vue.component('father',{
    template: '<div> <p>父元件</p> <son v-bind:sonname="name"></son></div>',
    data(){
        return {
            name: 'zs'
        }
    },
    // 通過components屬性建立子元件
    components: {
        //建立一個子元件
        son: {
            props: ['sonname'],
            template: '<p>子元件{{sonname}}</p>'
        }
    }

})

子元件傳值給父元件

this.$emit 觸發當前元件身上一個事件，傳送一個值(如果傳遞多個值，可設定物件，或者陣列)

<div id="app">
      <father></father>
</div>

具體業務邏輯

   Vue.component('father', {
    template: `
        <div>
         <p>父親年紀大了，記性不好，我兒子告訴我他叫{{mySonName}}</p>
          <son @tellFatherMyname="getMySonName"></son>
        </div>
    `,
    data () {
      return {
        mySonName: '????'
      }
    },
    methods: {
      // 這個函式中有一個預設引數，該引數就表示上傳上來的值
      getMySonName (data) {
        // console.log(data);
        this.mySonName = data
      }
    },
    components: {
      son: {
        data () {
          return {
            myName: '小明'
          }
        },
        template: '<button @click="emitMyname">點選就告訴我爸爸我叫{{myName}}</button>',
        methods: {
          emitMyname () {
            // 子元件傳值給父元件需要用到$emit()方法，這個方法可以傳遞兩個引數，一個是事件名稱，一個是需要傳遞的資料
            this.$emit('tellFatherMyname', this.myName)
          }
        }
      }
    }
  })

動態元件

• 利用component標籤建立動態元件，他的is屬性指向誰，就顯示哪個元件(v-bink繫結其is屬性)

// 建立動態元件，is屬性設定顯示內容
    <component :is='index'></component>
    // 此時顯示inde元件
    Vue.component('index',{
        template: '<div>首頁</div>'
    })
    Vue.component('list',{
        template: '<div>列表</div>'
    })