Vue組件-組件的屬性

在html中使用元素，會有一些屬性，如class,id，還可以綁定事件，自定義組件也是可以的。當在一個組件中，使用了其他自定義組件時，就會利用子組件的屬性和事件來和父組件進行數據交流。

比如，子組件需要某個數據，就在內部定義一個prop屬性，然后父組件就像給html元素指定特性值一樣，把自己的data屬性傳遞給子組件的這個屬性。
而當子組件內部發生了什么事情的時候，就通過自定義事件來把這個事情涉及到的數據暴露出來，供父組件

<my-component v-bind:foo="baz" v-on:event-a="doThis(arg1,...arg2)"></my-component>

如上代碼

foo是<my-component>組件內部定義的一個prop屬性，baz是父組件的一個data屬性，

event-a是子組件定義的一個事件，doThis是父組件的一個方法
過程就是這樣：

父組件把baz數據通過prop傳遞給子組件的foo；

子組件內部得到foo的值，就可以進行相應的操作；

當子組件內部發生了一些變化，希望父組件能知道時，就利用代碼觸發event-a事件，把一些數據發送出去

父組件把這個事件處理器綁定為doThis方法，子組件發送的數據，就作為doThis方法的參數被傳進來

然后父組件就可以根據這些數據，進行相應的操作

屬性Props

 Vue組件通過props屬性來聲明一個自己的屬性，然后父組件就可以往里面傳遞數據。

Vue.component('mycomponent',{
    template: '<div>這是一個自定義組件,父組件傳給我的內容是：{{myMessage}}</div>',
    props: ['myMessage'],
    data () {
      return {
        message: 'hello world'
      }
    }
  })

然后調用該組件

<div id="app">
    <mycomponent my-message="hello"></mycomponent>
</div>

注意，由於HTML特性是不區分大小寫的，所以傳遞屬性值時，myMessage應該轉換成 kebab-case (短橫線隔開式)my-message="hello"。

v-bind綁定屬性值

這里說一下v-bind綁定屬性值的一個特性：一般情況下，使用v-bind給元素特性(attribute)傳遞值時，Vue會將""中的內容當做一個表達式。
比如：

<div attr="message">hello</div>

上面這樣，div元素的attr特性值就是message。

而這樣

<div v-bind:attr="message">hello</div>

這里的message應該是Vue實例的data的一個屬性，這樣div元素的attr特性值就是message這個屬性的值。

之所以說是一般情況，是因為class和style特性並不是這樣。用v-bind:class和class傳入正常的類名，效果是一樣的，因為對於這兩個特性，Vue采用了合並而不是替換的原則。

動態綁定特性值

根據上面，想要把父組件的屬性綁定到子組件，應該使用v-bind，這樣，父組件中數據改變時能反映到子組件。
注意，根據父組件傳遞給子組件的屬性類型的不同，當在子組件中更改這個屬性時，會有以下兩種情況：

1.當父組件傳遞的屬性是引用類型時，在子組件中更改相應的屬性會導致父組件相應屬性的更改

<div id="app2">
<div>這是父組件的parentArray：{{parentArray}}</div>
<my-component :child-array="parentArray"></my-component>
</div>
<script>
Vue.component('my-component', {
 template: `<div>這是接收了父組件傳遞值的子組件的childArray: {{childArray}} <br>
     <button type="button" @click="changeArray">點擊我改變父元素的parentArray</button>
   </div>`,
 props: ['childArray'],
 data () {
   return {
     counter: 1
   }
 },
 methods: {
   changeArray () {
     this.childArray.push(this.counter++)
   }
 }
})
new Vue({
 el: '#app2',
 data: {
   parentArray: []
 }
})
</script>

2.當父組件傳遞值為基本類型時，在子組件中更改這個屬性會報錯。正確的做法是，在父組件中綁定屬性值時，加上.sync修飾符。

<my-component :child-array.sync="parentArray"></my-component>

然后在子組件中改變相應的屬性

methods: {
changeArray () {
 this.counter++
 this.$emit('update:childArray', this.counter)
}
}

子組件希望對傳入的prop進行操作

一般來說，是不建議在子組件中對父組件中傳遞來的屬性進行操作的。如果真的有這種需求,可以這樣:

 1.父組件傳遞了一個基本類型值，那么可以在子組件中創建一個新的屬性，並以傳遞進來的值進行初始化，之后就可以操作這個新的屬性了

props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}

2.父組件傳遞了一個引用類型值，為了避免更改父組件中相應的數據，最好是對引用類型進行復制。復雜的情況，肯定應該是深復制。

給子組件傳遞正確類型的值

同樣是上面的原因，靜態的給子組件的特性傳遞值，它都會把他當做一個字符串。

<!-- 傳遞了一個字符串 "1" -->
<comp some-prop="1"></comp>

子組件中，特性的值是字符串 "1" 而不是 number 1。如果想傳遞正確的數值，應該使用v-bind傳遞，這樣就能把傳遞的值當做一個表達式來處理，而不是字符串。

<!-- 傳遞實際的 number 1 -->
<comp v-bind:some-prop="1"></comp>

Prop驗證

我們可以給組件的props屬性添加驗證，當傳入的數據不符合要求時，Vue會發出警告。

Vue.component('example', {
  props: {
    // 基礎類型檢測 (`null` 意思是任何類型都可以)
    propA: Number,
    // 多種類型
    propB: [String, Number],
    // 必傳且是字符串
    propC: {
      type: String,
      required: true
    },
    // 數字，有默認值
    propD: {
      type: Number,
      default: 100
    },
    // 數組/對象的默認值應當由一個工廠函數返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗證函數
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type 可以是下面原生構造器：

String

Number

Boolean

Function

Object

Array

Symbol

type 也可以是一個自定義構造器函數，使用 instanceof 檢測

 // 自定義Person構造器
 function Person(name, age) {
    this.name = name
    this.age = age
  }
  Vue.component('my-component', {
    template: `<div>名字: {{ person-prop.name }}， 年齡： {{ person-prop.age }} </div>`,
    props: {
      person-prop: {
        type: Person     // 指定類型
      }
    }
  })
  new Vue({
    el: '#app2',
    data: {
      person: 2        // 傳入Number類型會報錯
    }
  })

非Prop類型的屬性

也可以像在html標簽中添加data-開頭的自定義屬性一樣，給自定義組件添加任意的屬性。而不僅限於data-*形式，這樣做的話，Vue會把這個屬性放在自定義組件的根元素上。一個自定義組件的模板只能有一個根元素。

覆蓋非Prop屬性

如果父組件向子組件的非prop屬性傳遞了值，那么這個值會覆蓋子組件模板中的特性。

<div id="app3">
    <my-component2 att="helloParent"></my-component2>
</div>
<script>
  Vue.component('my-component2', {
    template: `<div att="helloChild">子組件原有的特性被覆蓋了</div>`
  })
  new Vue({
    el: '#app3'
  })
</script>

上面渲染的結果是，div的att屬性是helloParent。
注意：前面已經提到過，覆蓋原則對於class和style不適用,而是采用了合並(merge)的原則。

<div id="app3">
    <my-component2 att="helloParent" class="class2" style="color: red;"></my-component2>
</div>
<script>
  Vue.component('my-component2', {
    template: `<div att="helloChild" class="class1" style="background: yellow;">子組件原有的特性被覆蓋了</div>`
  })
  new Vue({
    el: '#app3'
  })
</script>

上面的渲染結果是，div的類名是class1 class2，行內樣式是color:red; background:yellow;。