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