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組件學習教程進行學習。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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