溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Vue提供了兩種不同的存儲變量：props和data。
這些方法一開始可能會讓人感到困惑，因為它們做的事情很相似，而且也不清楚什何時使用props，何時使用data。
那么props和data有什么區別呢？
data是每個組件的私有內存，可以在其中存儲需要的任何變量。props是將數據從父組件傳遞到子組件的方式。
在本文中，我們將學習到：
什么是 props
在Vue中，props(或properties)是我們將數據從父組件向下傳遞到其子組件的方式。
當我們使用組件構建應用程序時，最終會構建一個稱為樹的數據結構。 類似于家譜，具有：
數據從根組件(位于最頂端的組件)沿著樹向下流動。就像基因是如何代代相傳的一樣，父組件也會將自己的props傳給了他們的孩子。
在Vue中，我們在代碼的<template>中向組件添加了一些props
<template> <my-component cool-prop="hello world"></my-component> </template>
在這個例子中，我們傳遞一個名為color-prop prop,其值為“hello world”。我們能夠從my-component內部訪問這個值。
然而，當我們從組件內部訪問props時，我們并不擁有它們，所以我們不能更改它們(就像你不能改變你父母給你的基因一樣)。
注意:雖然可以更改組件中的屬性，但這是一個非常糟糕的主意。最終還會更改父類正在使用的值，這可能會導致很多混淆。
但是有些情況我們需要改變變量，所以 data 就派上用場了。
什么是 data ?
data是每個組件的內存,這是存儲數據和希望跟蹤的任何其他變量的地方。
如果我們正在構建一個計數器應用程序，我們將需要跟蹤計數，因此我們將向我們的data添加一個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是私有的，僅供組件本身使用，其他組件不能訪問它。
注意:理論上是其它組件是不能訪問這些數據，但實際是可以的。但是出于同樣的原因，這樣做是非常糟糕的
如果需要向組件傳遞數據，可以使用props向下傳遞數據(傳遞給子組件)，或者使用事件向上傳遞數據(傳遞給父組件)。
props 和 data 都是響應式的
使用 Vue，我們不需要過多地考慮組件什么時候會更新，Vue 會自動幫我們做好，因為 Vue 是響應式的。
我們不必每次更改 data 都調用setState，只需更改data即可！ 只要要更新具有響應式的屬性（props，computed 及 data 中的任何值），Vue 就會知道它何時發生變化。
回到計數器應用程序，我們仔細看看這里面的方法
methods: {
increment() {
this.count += 1;
},
decrement() {
this.count -= 1;
}
}
我們所要做的就是更新count，Vue 會檢測到這個變化，然后用新值重新渲染我們的應用程序
Vue 的響應系統有很多細微的差別，如果你想要高效地使用Vue，理解它是非常重要的。如果你想更深入地了解Vue的響應系統，這里有更多要了解的東西。
避免命名沖突
Vue所做的另一件事是，使開發工作變得更好一點。
我們在組件上定義一些 props 和 data
export default {
props: ['propA', 'propB'],
data() {
return {
dataA: 'hello',
dataB: 'world',
};
},
};
如果要在方法內部訪問它們，則不必使用this.props.propA或this.data.dataA。 Vue 讓我們完全省略了 props 和 dasta，只剩下了更整潔的代碼。
我們可以使用this.propA或this.dataA訪問它們：
methods: {
coolMethod() {
// Access a prop
console.log(this.propA);
// Access our data
console.log(this.dataA);
}
}
因此，如果我們不小心在data和 props中使用相同的名稱，則會遇到問題。
如果發生這種情況，Vue 會給你一個警告，因為它不知道你想訪問哪個。
export default {
props: ['secret'],
data() {
return {
secret: '1234',
};
},
methods: {
printSecret() {
// 我們想要哪一個？
console.log(this.secret);
}
}
};
當我們同時使用props和data時，Vue 的神奇之處就產生了。
props 和 data 一起使用
既然我們已經看到了 props 和 data 的不同之處，讓我們來看看為什么我們需要兩個，通過建立一個基本的應用程序。
我們將使用名為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，并將其顯示在頁面上。
我們的個人資料頁面組件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: 'johnsmith445',
},
}
}
};
我們的ProfilePage組件目前顯示用戶的配置文件圖片及其名稱，它還有用戶數據對象。
我們如何從父組件(ProfilePage)向下獲取數據到子組件(ContactInfo)
我們必須使用 props 傳遞數據。
首先，我們需要將ContactInfo組件導入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: 'johnsmith445',
},
}
}
};
其次，我們必須在<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>
現在ContactInfo需要的所有用戶數據都將沿著組件樹向下流動，并從ProfilePage進入ContactInfo。
我們將數據保存在ProfilePage而不是ContactInfo中的原因是ProfilePage頁面的其他部分需要訪問user對象。
由于數據只向下流，這意味著我們必須將數據放在組件樹中足夠高的位置，以便它可以向下流到需要去的所有位置。
原文：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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
