vue的props實現子組件隨父組件一起變化
更新時間：2016年10月27日 09:18:52 作者：馬優(yōu)晨
這篇文章主要為大家詳細介紹了vue的props如何實現子組件隨父組件一起變化,具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue的props實現父組件變化子組件一起變化，供大家參考，具體內容如下
類似于用 v-bind 綁定 HTML 特性到一個表達式，也可以用 v-bind 綁定動態(tài) Props 到父組件的數據。每當父組件的數據變化時，也會傳導給子組件：
<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實現父組件變化子組件一起變化</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前端組件學習教程》，歡迎大家學習閱讀。
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue提供了一種更通用的方式來觀察和響應當前活動的實例上的數據變動:偵聽屬性,下面這篇文章主要給大家介紹了關于Vue3.0多種偵聽方式的相關資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了vue 使用vue-i18n做全局中英文切換的實現方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10
vue中provide?inject的響應式監(jiān)聽解決方案
這篇文章主要介紹了vue中provide?inject的響應式監(jiān)聽解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了vite的搭建與使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
vue中利用simplemde實現markdown編輯器（增加圖片上傳功能）
這篇文章主要介紹了vue中利用simplemde實現markdown編輯器（增加圖片上傳功能）,本文通過實例代碼相結合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要介紹了構建大型 Vue.js 項目的10條建議(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要為大家詳細解析了vue分頁組件table-pagebar使用實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細介紹了vue+moment實現倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要為大家詳細介紹了vue實現勻速輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue如何解決數據加載時,插值表達式閃爍問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01