vue之元件理解（一）

居老師的狗子發表於2019-03-12
Vue元件

　　元件是可複用的 Vue 例項，所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。僅有的例外是像 el 這樣根例項特有的選項。

　　其中，一個元件的 data 選項必須是一個函式，因此每個例項可以維護一份被返回物件的獨立的拷貝。

data: function () {
  return {
    count: 0
  }
}

 

　　使用元件為了更好的複用，相當於自定義標籤，你可以進行任意次數的複用。

　　首先要明確自己元件的功能

　　比如實現兩個按鈕，一個喜歡，一個不喜歡，每次點選可以記錄次數。當點選按鈕時，每個元件會各自獨立維護它的count，每使用一個元件都會有一個新的例項被建立。

// 呼叫button元件
<hello-world heading="Likes" color="green"></hello-world>
<hello-world heading="Dislikes" color="red"></hello-world>

 

<template id="button-component">
<div id="box">
  <h1>{{ heading }}</h1>
  <button @click="count += 1" :class="color">{{ count }}</button>
</div>
</template>

<script>
    export default {
        name: "button-component",
      props:['heading','color'],
      data:function () {

        return{
          count:0
        }
      }
    }
</script>

<style scoped>
  button{width: 50px;height: 30px;border-radius: 5px;}
.green{
  background:green;
}
  .red{
    background: red;
  }
</style>

出現的問題：對於直接繫結改變style的background值，

style="background: {{ color }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div style="{{ val }}">, use <div :style="val">.

相關文章