欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Vue中的Props與Data細(xì)微差別

 更新時(shí)間:2020年03月02日 08:30:18   作者:前端小智  
這篇文章主要介紹了詳解Vue中的Props與Data細(xì)微差別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Vue提供了兩種不同的存儲(chǔ)變量:props和data。

這些方法一開(kāi)始可能會(huì)讓人感到困惑,因?yàn)樗鼈冏龅氖虑楹芟嗨?,而且也不清楚什何時(shí)使用props,何時(shí)使用data。

那么props和data有什么區(qū)別呢?

data是每個(gè)組件的私有內(nèi)存,可以在其中存儲(chǔ)需要的任何變量。props是將數(shù)據(jù)從父組件傳遞到子組件的方式。

在本文中,我們將學(xué)習(xí)到:

  • 什么是props,為什么這些數(shù)據(jù)只向下流動(dòng),而不是向上
  • data 選項(xiàng)的用途
  • 響應(yīng)式是什么
  • 如何避免 props 和 data 之間的命名沖突
  • 如何將 props 和 data 結(jié)合使用

什么是 props

在Vue中,props(或properties)是我們將數(shù)據(jù)從父組件向下傳遞到其子組件的方式。

當(dāng)我們使用組件構(gòu)建應(yīng)用程序時(shí),最終會(huì)構(gòu)建一個(gè)稱(chēng)為樹(shù)的數(shù)據(jù)結(jié)構(gòu)。 類(lèi)似于家譜,具有:

  • 父母
  • 孩子
  • 祖先
  • 子孫

數(shù)據(jù)從根組件(位于最頂端的組件)沿著樹(shù)向下流動(dòng)。就像基因是如何代代相傳的一樣,父組件也會(huì)將自己的props傳給了他們的孩子。

在Vue中,我們?cè)诖a的<template>中向組件添加了一些props

<template>
 <my-component cool-prop="hello world"></my-component>
</template>

在這個(gè)例子中,我們傳遞一個(gè)名為color-prop prop,其值為“hello world”。我們能夠從my-component內(nèi)部訪(fǎng)問(wèn)這個(gè)值。

然而,當(dāng)我們從組件內(nèi)部訪(fǎng)問(wèn)props時(shí),我們并不擁有它們,所以我們不能更改它們(就像你不能改變你父母給你的基因一樣)。

注意:雖然可以更改組件中的屬性,但這是一個(gè)非常糟糕的主意。最終還會(huì)更改父類(lèi)正在使用的值,這可能會(huì)導(dǎo)致很多混淆。
但是有些情況我們需要改變變量,所以 data 就派上用場(chǎng)了。

什么是 data ?

data是每個(gè)組件的內(nèi)存,這是存儲(chǔ)數(shù)據(jù)和希望跟蹤的任何其他變量的地方。

如果我們正在構(gòu)建一個(gè)計(jì)數(shù)器應(yīng)用程序,我們將需要跟蹤計(jì)數(shù),因此我們將向我們的data添加一個(gè)count:

<template>
 <div>
 {{ count }}
 <button @click="increment">+</button>
 <button @click="decrement">-</button>
 </div>
</template>
------------------------------------------
export default {
 name: 'Counter',
 data() {
 return {
  // Initialized to zero to begin
  count: 0,
 }
 },
 methods: {
 increment() {
  this.count += 1;
 },
 decrement() {
  this.count -= 1;
 }
 }
}

此處的data是私有的,僅供組件本身使用,其他組件不能訪(fǎng)問(wèn)它。

注意:理論上是其它組件是不能訪(fǎng)問(wèn)這些數(shù)據(jù),但實(shí)際是可以的。但是出于同樣的原因,這樣做是非常糟糕的
如果需要向組件傳遞數(shù)據(jù),可以使用props向下傳遞數(shù)據(jù)(傳遞給子組件),或者使用事件向上傳遞數(shù)據(jù)(傳遞給父組件)。

props 和 data 都是響應(yīng)式的

使用 Vue,我們不需要過(guò)多地考慮組件什么時(shí)候會(huì)更新,Vue 會(huì)自動(dòng)幫我們做好,因?yàn)?Vue 是響應(yīng)式的。

我們不必每次更改 data 都調(diào)用setState,只需更改data即可! 只要要更新具有響應(yīng)式的屬性(props,computed 及 data 中的任何值),Vue 就會(huì)知道它何時(shí)發(fā)生變化。

回到計(jì)數(shù)器應(yīng)用程序,我們仔細(xì)看看這里面的方法

methods: {
 increment() {
 this.count += 1;
 },
 decrement() {
 this.count -= 1;
 }
}

我們所要做的就是更新count,Vue 會(huì)檢測(cè)到這個(gè)變化,然后用新值重新渲染我們的應(yīng)用程序

Vue 的響應(yīng)系統(tǒng)有很多細(xì)微的差別,如果你想要高效地使用Vue,理解它是非常重要的。如果你想更深入地了解Vue的響應(yīng)系統(tǒng),這里有更多要了解的東西。

避免命名沖突

Vue所做的另一件事是,使開(kāi)發(fā)工作變得更好一點(diǎn)。

我們?cè)诮M件上定義一些 props 和 data

export default {
 props: ['propA', 'propB'],
 data() {
 return {
  dataA: 'hello',
  dataB: 'world',
 };
 },
};

如果要在方法內(nèi)部訪(fǎng)問(wèn)它們,則不必使用this.props.propA或this.data.dataA。 Vue 讓我們完全省略了 props 和 dasta,只剩下了更整潔的代碼。

我們可以使用this.propA或this.dataA訪(fǎng)問(wèn)它們:

methods: {
 coolMethod() {
 // Access a prop
 console.log(this.propA);

 // Access our data
 console.log(this.dataA);
 }
}

因此,如果我們不小心在data和 props中使用相同的名稱(chēng),則會(huì)遇到問(wèn)題。

如果發(fā)生這種情況,Vue 會(huì)給你一個(gè)警告,因?yàn)樗恢滥阆朐L(fǎng)問(wèn)哪個(gè)。

export default {
 props: ['secret'],
 data() {
 return {
  secret: '1234',
 };
 },
 methods: {
 printSecret() {
  // 我們想要哪一個(gè)?
  console.log(this.secret);
 }
 }
};

當(dāng)我們同時(shí)使用props和data時(shí),Vue 的神奇之處就產(chǎn)生了。

props 和 data 一起使用

既然我們已經(jīng)看到了 props 和 data 的不同之處,讓我們來(lái)看看為什么我們需要兩個(gè),通過(guò)建立一個(gè)基本的應(yīng)用程序。

我們將使用名為ContactInfo的組件顯示此信息:

// ContactInfo
<template>
 <div class="container">
 <div class="row">
  Email: {{ emailAddress }}
  Twitter: {{ twitterHandle }}
  Instagram: {{ instagram }}
 </div>
 </div>
</template>
-------------------------------------
export default {
 name: 'ContactInfo',
 props: ['emailAddress', 'twitterHandle', 'instagram'],
};

ContactInfo組件接受 props:emailAddress,twitterHandle和instagram,并將其顯示在頁(yè)面上。

我們的個(gè)人資料頁(yè)面組件ProfilePage如下所示:

// ProfilePage
<template>
 <div class="profile-page">
 <div class="avatar">
  <img src="user.profilePicture" />
  {{ user.name }}
 </div>
 </div>
</template>
-------------------------------------------------
export default {
 name: 'ProfilePage',
 data() {
 return {
  // In a real app we would get this data from a server
  user: {
  name: 'John Smith',
  profilePicture: './profile-pic.jpg',
  emailAddress: 'john@smith.com',
  twitterHandle: 'johnsmith',
  instagram: 'johnsmith345',
  },
 }
 }
};

我們的ProfilePage組件目前顯示用戶(hù)的配置文件圖片及其名稱(chēng),它還有用戶(hù)數(shù)據(jù)對(duì)象。

我們?nèi)绾螐母附M件(ProfilePage)向下獲取數(shù)據(jù)到子組件(ContactInfo)

我們必須使用 props 傳遞數(shù)據(jù)。

首先,我們需要將ContactInfo組件導(dǎo)入ProfilePage組件

// Import the component
import ContactInfo from './ContactInfo.vue';

export default {
 name: 'ProfilePage',

 // Add it as a dependency
 components: {
 ContactInfo,
 },

 data() {
 return {
  user: {
  name: 'John Smith',
  profilePicture: './profile-pic.jpg',
  emailAddress: 'john@smith.com',
  twitterHandle: 'johnsmith',
  instagram: 'johnsmith345',
  },
 }
 }
};

其次,我們必須在<template>中添加組件:

// ProfilePage
<template>
 <div class="profile-page">
 <div class="avatar">
  <img src="user.profilePicture" />
  {{ user.name }}
 </div>

 <!-- Add component in with props -->
 <contact-info
  :email-address="emailAddress"
  :twitter-handle="twitterHandle"
  :instagram="instagram"
 />

 </div>
</template>

現(xiàn)在ContactInfo需要的所有用戶(hù)數(shù)據(jù)都將沿著組件樹(shù)向下流動(dòng),并從ProfilePage進(jìn)入ContactInfo。

我們將數(shù)據(jù)保存在ProfilePage而不是ContactInfo中的原因是ProfilePage頁(yè)面的其他部分需要訪(fǎng)問(wèn)user對(duì)象。

由于數(shù)據(jù)只向下流,這意味著我們必須將數(shù)據(jù)放在組件樹(shù)中足夠高的位置,以便它可以向下流到需要去的所有位置。

原文:https://medium.com/js-dojo/vue-data-flow-how-it-works-3ff316a7ffcd

PS:vue中把props中的值賦值給data

父組件:

<template>
 <div>
 <navbar :ctype="ctype"></navbar>
 </div>
</template>

<script>
import navbar from '@/components/navbar'
  export default {
  components: {navbar},
  data () {
   return{
   ctype:1
   }
  }
  }
</script>

子組件:

<template>
 <div>
 <div>{{thistype}}</div>
 </div>
</template>

<script>
export default {
  props:['ctype'],
  computed: {
   normalizedSize: function () {
    return this.ctype.trim().toLowerCase()
   }
  },
  data(){
    return{
      thistype:this.ctype
    }
  }
}
</script>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue分割面板封裝實(shí)現(xiàn)記錄

    vue分割面板封裝實(shí)現(xiàn)記錄

    這篇文章主要為大家詳細(xì)介紹了vue分割面板封裝實(shí)現(xiàn)記錄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue.set 全局操作簡(jiǎn)單示例

    Vue.set 全局操作簡(jiǎn)單示例

    這篇文章主要介紹了Vue.set 全局操作,結(jié)合簡(jiǎn)單實(shí)例形式分析了Vue.set 全局操作相關(guān)使用技巧與注意事項(xiàng),需要的朋友可以參考下
    2019-09-09
  • vscode中vue代碼提示與補(bǔ)全沒(méi)反應(yīng)解決(vetur問(wèn)題)

    vscode中vue代碼提示與補(bǔ)全沒(méi)反應(yīng)解決(vetur問(wèn)題)

    這篇文章主要給大家介紹了關(guān)于vscode中vue代碼提示與補(bǔ)全沒(méi)反應(yīng)解決(vetur問(wèn)題)的相關(guān)資料,文中通過(guò)圖文將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下
    2023-03-03
  • vue路由事件beforeRouteLeave及組件內(nèi)定時(shí)器的清除方法

    vue路由事件beforeRouteLeave及組件內(nèi)定時(shí)器的清除方法

    今天小編就為大家分享一篇vue路由事件beforeRouteLeave及組件內(nèi)定時(shí)器的清除方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09
  • vuex state及mapState的基礎(chǔ)用法詳解

    vuex state及mapState的基礎(chǔ)用法詳解

    這篇文章主要介紹了vuex state及mapState的基礎(chǔ)用法詳解,本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì),需要的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
    2018-04-04
  • vue不用window的方式如何刷新當(dāng)前頁(yè)面

    vue不用window的方式如何刷新當(dāng)前頁(yè)面

    這篇文章主要介紹了vue不用window的方式如何刷新當(dāng)前頁(yè)面,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼

    FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼

    本文主要介紹了FastApi+Vue+LayUI實(shí)現(xiàn)前后端分離的示例代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • 關(guān)于vue-cli3打包代碼后白屏的解決方案

    關(guān)于vue-cli3打包代碼后白屏的解決方案

    這篇文章主要介紹了關(guān)于vue-cli3打包代碼后白屏的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • Vuex的安裝、搭建及案例詳解

    Vuex的安裝、搭建及案例詳解

    vuex是一個(gè)專(zhuān)門(mén)為vue開(kāi)發(fā)的狀態(tài)管理工具,它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),其核心是state,下面這篇文章主要給大家介紹了關(guān)于Vuex的安裝、搭建及案例的相關(guān)資料,需要的朋友可以參考下
    2022-05-05
  • vxe-table中vxe-grid的使用解讀

    vxe-table中vxe-grid的使用解讀

    這篇文章主要介紹了vxe-table中vxe-grid的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評(píng)論