DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> vue的props實現子組件隨父組件一起變化
vue的props實現子組件隨父組件一起變化
編輯:關於JavaScript     

本文實例為大家分享了vue的props實現父組件變化子組件一起變化,供大家參考,具體內容如下

類似於用 v-bind 綁定 HTML 特性到一個表達式,也可以用 v-bind 綁定動態 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前端組件學習教程》,歡迎大家學習閱讀。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved