iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 15
0
自我挑戰組

vue.js 30天學習軌跡系列 第 15

Day15 vue.js - 組件(Components)必須使用function return

今天..學的如標題 組件(Components)必須使用function retur

在 vue 的應用程式中 data 可以是物件(object )或是 函式(function),
但是在 Components 裡面data 只能是 function 這是因為 Components裡的data 都是各自獨立,
而非共用的關係。
如果我們不這樣做,所有實例將共享同一個對象,每次我們更改某些內容時,它都會反映在所有實例中。

demo

<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

<script type="text/x-template" id="counter-component">
  <div>
    你已經點擊 
    <button  @click="counter += 1">{{ counter }}</button> 下。
  </div>
</script>
Vue.component('button-counter', {
  data() {
    return{
       counter: 0
    } 
  },
  template: '#counter-component'
})
var app = new Vue({
  el: '#app',
});

/images/emoticon/emoticon08.gif


上一篇
Day14 vue.js - 組件(Components)介紹及建立
下一篇
Day16 vue.js - props(1)
系列文
vue.js 30天學習軌跡30

尚未有邦友留言

立即登入留言