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)容如下
類似于用 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 的縮寫語法通常更簡單：<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組件的教程，請大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3.0數(shù)據(jù)響應(yīng)式原理詳解
這篇文章主要介紹了Vue3.0數(shù)據(jù)響應(yīng)式原理詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue通過Object.defineProperty來實(shí)現(xiàn)監(jiān)聽數(shù)據(jù)的改變和讀?。▽傩灾械膅etter和setter方法） 實(shí)現(xiàn)數(shù)據(jù)劫持。下面簡單記錄一下，vue監(jiān)聽數(shù)據(jù)變化的原理2023-01-01
vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式
這篇文章主要介紹了vue之字符串、數(shù)組之間的相互轉(zhuǎn)換方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue?同局域網(wǎng)訪問不到的問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue?elementUI表單嵌套表格并對每行進(jìn)行校驗(yàn)詳解
element-ui中有詳細(xì)的各種表格及表格方法,下面這篇文章主要給大家介紹了關(guān)于Vue?elementUI表單嵌套表格并對每行進(jìn)行校驗(yàn)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
vue中使用echarts并根據(jù)選擇條件動(dòng)態(tài)展示echarts圖表
雖然老早就看過很多echarts的例子, 但自己接觸的項(xiàng)目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts并根據(jù)選擇條件動(dòng)態(tài)展示echarts圖表的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了基于 Vue 的商品主圖放大鏡方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)前端列表多條件篩選，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家詳細(xì)介紹了Vue3封裝實(shí)現(xiàn)右鍵菜單組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以了解下2025-02-02
vue2老項(xiàng)目中node-sass更換dart-sass的操作方法
這篇文章主要介紹了vue2老項(xiàng)目中node-sass更換dart-sass的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-07-07