Vue親コンポーネントはサブアセンブリに値を伝え、dataとpropsの違いを詳しく説明します。

2160 ワード
Vue 親コンポーネント サブコンポーネント 伝値
1.親コンポーネントにmsg属性を定義する

 data:{
  msg:'123 -         '
 },
2.サブコンポーネントを参照する
親コンポーネントは、サブアセンブリを参照する際に、属性バインディングの形で、サブアセンブリに渡す必要があるデータを、属性バインディングの形で、サブアセンブリの内部に伝達してもよい。
親コンポーネントから渡されたmsg属性を、サブアセンブリのparentmsg属性に結び付けます。

<com1 :parentmsg="msg"></com1>
3.サブアセンブリの定義部分では、親コンポーネントを渡されるparentmsg属性をプロps配列で定義してから、このデータを使用することができます。

props:['parentmsg'],
4.サブコンポーネントで使用する

template:"<h1>     --{{parentmsg}}</h1>",
5.サブコンポーネントのdataとpropsの違い
サブアセンブリのdataデータは、親コンポーネントを通して渡されるのではなく、サブアセンブリがプライベートであり、読み書き可能である。
サブコンポーネントのすべてのpropsのデータは、親コンポーネントを通してサブコンポーネントに渡されるもので、読み取り専用です。
完全コード:

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>
<body>
 <div id='app'>
 <!--               ，         ，            ，
         ，        ，       -->
 <com1 :parentmsg="msg"></com1>
 </div>
</body>
<script src="../lib/vue.js"></script>
<script>
 var vm = new Vue({
 el:'#app',
 data:{
  msg:'123-         '
 },
 components:{
  //            data methods
  com1:{
  //     data  ，                 
  //data    ，      
  data(){
   return {
   title:'123',
   content:'qqq'
   }
  },
  template:"<h1>     --{{parentmsg}}</h1>",
  //  ，       props    ，              
  //  
  props:['parentmsg'],//         parentmsg  ，
  //  props       ，  ，        
  methods:{
  
  }
  }
 }
 })
</script>
</html>

ここで、Vueの親コンポーネントのサブコンポーネントへの送信値とdataとpropsの違いについての詳細な記事を紹介します。Vueの親コンポーネントについては、サブアセンブリに値を伝えます。以前の記事を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。
SprigCloudはZookeeperを登録センターとして使用します。
jsコンストラクタとプロトタイプの原理と使用例分析