vue組件屬性(props)及私有數(shù)據(jù)data解析

更新時(shí)間：2022年10月18日 10:51:10 作者：左直拳

這篇文章主要介紹了vue組件屬性(props)及私有數(shù)據(jù)data解析，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue作為一種前端開發(fā)框架，組件是其中的主角吧。其實(shí)任何一種前端框架，除了vue，還有react，組件都應(yīng)該是主角。為啥呢，因?yàn)榻M件最能體現(xiàn)面向?qū)ο笏枷耄瑔我宦氊?zé)，良好的封裝性，高內(nèi)聚，低耦合，利于復(fù)用和維護(hù)，提升開發(fā)效率，符合人類思維模式。。。好處多多。

所謂的前端，就是跑在瀏覽器一側(cè)的代碼。以前的前端代碼，寫的時(shí)候是什么樣，最終運(yùn)行的時(shí)候就是什么樣，完全由瀏覽器解釋運(yùn)行，所以也叫靜態(tài)頁面。現(xiàn)在的前端開發(fā)框架完全不是這樣，它類似于服務(wù)器端的開發(fā)模式，代碼寫好之后，需要編譯、發(fā)布。這就為代碼的組件化創(chuàng)造了條件。如果想完全用html,js這類純原生的代碼實(shí)現(xiàn)復(fù)用，是非常困難的。

比如js,引入js文件當(dāng)然可以復(fù)用，但粒度比較粗的情況下，冗余量大，并且想在運(yùn)行的時(shí)候各種參數(shù)傳遞，組合，提供動態(tài)生成效果，不是一般的困難，根本提供不了像asp.net,jsp這種有服務(wù)器加持，先由服務(wù)器解釋，生成，再輸出到瀏覽器端這種便利。

可以這么說，前端代碼只有采用各種打包工具進(jìn)行發(fā)布這種模式，或者有了react、vue等開發(fā)框架，才使得前后端分離真正落地。

扯遠(yuǎn)了。vue組件中，props代表公有屬性，主要對外，可用于接收父組件或頁面?zhèn)鬟f過來的參數(shù)；data則代表私有數(shù)據(jù)，組件內(nèi)部使用，不推薦外部進(jìn)行操作或讀取。當(dāng)然，你硬是要訪問，應(yīng)該也能訪問得了。

props

1、組件Comp1.vue

<template>
  <div>
    {{info}}
  </div>  
</template>
<script>
let _info = "加油！"
export default {
  props: {
    info: {
      default: _info
    }
  }
  /*
    寫成 props: ['info'] 也可以，但沒有默認(rèn)值
   */
}
</script>

2、使用了Comp1的頁面

<template>
  <div>
    <div>
      <Comp1 />
    </div>      
    <div>
      <Comp1 info="要堅(jiān)持！" />
    </div>  
    <div>
      <Comp1 :info="ourInfo" />
    </div>   
  </div>  
</template>
<script>
import Comp1 from './Comp1.vue'
export default{
  components:{
    Comp1
  },
  data(){
    return {
      ourInfo:'別放棄！'
    }
  }
}
</script>

3、運(yùn)行結(jié)果

data

<template>
  <div>
    <div>
      <Comp1 />
    </div>      
    <div>
      <Comp1 info="要堅(jiān)持！" />
    </div>  
    <div>
      <Comp1 :info="ourInfo" />
    </div>   
    <div>
      {{ourInfo2}}
    </div>
    <div>
      {{ourInfo3}}
    </div>    
  </div>  
</template>
<script>
import Comp1 from './Comp1.vue'
export default{
  components:{
    Comp1
  },
  data(){//Vue 在創(chuàng)建新組件實(shí)例的過程中調(diào)用此函數(shù)
    return {
      ourInfo:'別放棄！',
      ourInfo2:'盡人事，聽天命!',
      ourInfo3:'盡人事，聽天命!'
    }
  },
  mounted(){
    this.ourInfo3 = '只管努力去做，但求無愧于心'
  }
}
</script>