ホームページ  >  記事  >  php教程  >  Vue の props により、子コンポーネントが親コンポーネントと一緒に変更できるようになります

Vue の props により、子コンポーネントが親コンポーネントと一緒に変更できるようになります

高洛峰
高洛峰オリジナル
2016-12-08 16:05:082393ブラウズ

この記事の例では、親コンポーネントとサブコンポーネントに変更を実装するための Vue の小道具を参考として共有します。具体的な内容は次のとおりです。

v-bind を使用して HTML 機能を式にバインドするのと同様に、次のこともできます。 v-bind を使用して、動的 Props の定義を親コンポーネントのデータにバインドします。親コンポーネントのデータが変更されると、そのデータは子コンポーネントにも送信されます:

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

通常、v-bind の短縮構文を使用する方が簡単です: 823b4fdaf4bef2755e7ecf836f73fee04e517a27fe89dceebc97891337d3a4a7

インスタンス:

<!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 までご連絡ください。