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

這些方法一開(kāi)始可能會(huì)讓人感到困惑，因?yàn)樗鼈冏龅氖虑楹芟嗨疲乙膊磺宄埠螘r(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)部訪問(wèn)這個(gè)值。

然而，當(dāng)我們從組件內(nèi)部訪問(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是私有的，僅供組件本身使用，其他組件不能訪問(wèn)它。

注意:理論上是其它組件是不能訪問(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)部訪問(wèn)它們，則不必使用this.props.propA或this.data.dataA。 Vue 讓我們完全省略了 props 和 dasta，只剩下了更整潔的代碼。

我們可以使用this.propA或this.dataA訪問(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問(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='http://www.lshqa.cn/bcjs/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 componentimport 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='http://www.lshqa.cn/bcjs/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è)面的其他部分需要訪問(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í)有所幫助，也希望大家多多支持好吧啦網(wǎng)。