vue的props實(shí)現(xiàn)子組件隨父組件一起變化
更新時(shí)間：2016年10月27日 09:18:52 作者：馬優(yōu)晨
這篇文章主要為大家詳細(xì)介紹了vue的props如何實(shí)現(xiàn)子組件隨父組件一起變化,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue的props實(shí)現(xiàn)父組件變化子組件一起變化，供大家參考，具體內(nèi)容如下
類(lèi)似于用 v-bind 綁定 HTML 特性到一個(gè)表達(dá)式，也可以用 v-bind 綁定動(dòng)態(tài) Props 到父組件的數(shù)據(jù)。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，也會(huì)傳導(dǎo)給子組件：
<div> <input v-model="parentMsg"> <br> <child v-bind:my-message="parentMsg"></child> </div>
使用 v-bind 的縮寫(xiě)語(yǔ)法通常更簡(jiǎn)單：<child :my-message="parentMsg"></child>
實(shí)例：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="vue.js"></script>
<meta charset="UTF-8">
<title>vue的props實(shí)現(xiàn)父組件變化子組件一起變化</title>
</head>
<body>
<div id="app1">
<input v-model="messsage" > <!--input綁定實(shí)例中data中的message-->
<div >
<child v-bind:my-message="messsage"></child> <!--子組件綁定實(shí)例中data中的message-->
</div>
</div>
<script>
Vue.config.debug = true;
Vue.component('child',{
props: ['myMessage'], //VUE實(shí)例中myMessage 等價(jià)于my-message
template: '<span>{{ myMessage }}</span><br>'
});
var vm = new Vue({
el: '#app1',
data:{
messsage:'hello you are a good boy!'
}
});
</script>
</body>
</html>
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專(zhuān)題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue提供了一種更通用的方式來(lái)觀(guān)察和響應(yīng)當(dāng)前活動(dòng)的實(shí)例上的數(shù)據(jù)變動(dòng):偵聽(tīng)屬性,下面這篇文章主要給大家介紹了關(guān)于Vue3.0多種偵聽(tīng)方式的相關(guān)資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue 使用vue-i18n做全局中英文切換的實(shí)現(xiàn)方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-10-10
vue中provide?inject的響應(yīng)式監(jiān)聽(tīng)解決方案
這篇文章主要介紹了vue中provide?inject的響應(yīng)式監(jiān)聽(tīng)解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了vite的搭建與使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
vue中利用simplemde實(shí)現(xiàn)markdown編輯器（增加圖片上傳功能）
這篇文章主要介紹了vue中利用simplemde實(shí)現(xiàn)markdown編輯器（增加圖片上傳功能）,本文通過(guò)實(shí)例代碼相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
構(gòu)建大型 Vue.js 項(xiàng)目的10條建議(小結(jié))
這篇文章主要介紹了構(gòu)建大型 Vue.js 項(xiàng)目的10條建議(小結(jié))，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue分頁(yè)組件table-pagebar使用實(shí)例解析
這篇文章主要為大家詳細(xì)解析了vue分頁(yè)組件table-pagebar使用實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
vue+moment實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了vue+moment實(shí)現(xiàn)倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)勻速輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
vue如何解決數(shù)據(jù)加載時(shí),插值表達(dá)式閃爍問(wèn)題
這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時(shí),插值表達(dá)式閃爍問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01