首頁 >php教程 >PHP开发 >vue的props實作子元件隨父元件一起變化

vue的props實作子元件隨父元件一起變化

高洛峰原創: 2016-12-08 16:05:082424瀏覽

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

類似於用v-bind 綁定HTML 特性到一個表達式，也可以用v-bind 綁定定動態Props 到父元件的資料。每當父元件的資料變化時，也會傳導給子元件：

<div>
 <input v-model="parentMsg">
 <br>
 <child v-bind:my-message="parentMsg"></child>
</div>

使用v-bind 的縮寫語法通常更簡單：
">

實例：

<!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(&#39;child&#39;,{
   props: [&#39;myMessage&#39;], //VUE实例中myMessage 等价于my-message
   template: &#39;<span>{{ myMessage }}</span><br>&#39;
  });
  var vm = new Vue({
   el: &#39;#app1&#39;,
   data:{
    messsage:&#39;hello you are a good boy!&#39;
   }
  });
 </script>
</body>
 
</html>

🎜

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：微信小程式 Mustache語法詳細介紹下一篇：微信小程式 Mustache語法詳細介紹

看更多

vue的props實作子元件隨父元件一起變化

相關文章