VUE data传值
生活随笔
收集整理的這篇文章主要介紹了
VUE data传值
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
data 必須是一個(gè)函數(shù)
上面例子中,可以看到 button-counter 組件中的 data 不是一個(gè)對象,而是一個(gè)函數(shù):
data: function () {return {count: 0} }這樣的好處就是每個(gè)實(shí)例可以維護(hù)一份被返回對象的獨(dú)立的拷貝,如果 data 是一個(gè)對象則會影響到其他實(shí)例,如下所示:
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>v-on-data事件</title><script src="js/vue.js"></script></head><body><div id="components-demo"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter></div><script>var buttonCounter2Data={count:0}Vue.component('button-counter',{data:function(){//data選項(xiàng)是一個(gè)對象,會影響到其他實(shí)例;return buttonCounter2Data},template:'<button v-on:click="count++">點(diǎn)擊了{(lán){count}}次</button>'})new Vue({el:'#components-demo'})</script></body> </html>?
?
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的VUE data传值的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。