説明VUEの小道具と2つの小道具非特性

　　2つの小道具の特性

　　　　①：値通過性を介して親コンポーネント（例えば、以下のスクリーンショットのコンテンツなど）サブアセンブリに、コンテンツはDOMノードに表示されていません

　　　　 ②：値渡す父コンポーネントサブアセンブリ（コンテンツ）をサブアセンブリを受信することによって、小道具を、サブアセンブリとすることができる直接{} {} （補間式）this.contentで取得したコンテンツまたはコンテンツ

　　デモ

     <！DOCTYPE HTML > 
< HTML > 
     < ヘッド> 
           < メタ文字コード= "UTF-8" > 
           < タイトル> </ タイトル> 
           < スクリプトSRC = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js " > </ スクリプト> 
     </ ヘッド> 
     < 身体> 
           < div要素のid ="ルート」> 
                < 子コンテンツ= "Hello World"の> </ 子> 
           <
           
           > 
                Vue.component（' 子' 、{ 
                     小道具：[ ' コンテンツ' ]、
                     テンプレート：' の<div> {{内容}} </ div> '    
                }）
                
                VaRのVM =  新しいヴュー（{ 
                     EL：' #root ' 
                } ）
           </ スクリプト> 
     </ ボディ> 

</ HTML >

　　二つの特性の非小道具

　　　　①：値を渡す親コンポーネントサブアセンブリ（コンテンツ）、サブアセンブリは、DOMノードに表示小道具、コンテンツによって受信されません

　　　　 ②：属性値を通過する親コンポーネント（コンテンツ）、サブアセンブリを小道具によって受信されていない、この時間は、コンテンツが使用できないことを示唆しているが定義されていない、説明します

　　デモ

 <!DOCTYPE html>
<html>
     <head>
           <meta charset="UTF-8">
           <title></title>
           <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
     </head>
     <body>
           <div id="root">
                <child content="hello world"></child>
           </div>
           
           <script type="text/javascript">
                Vue.component('child', {
//                  props: ['content'],
                    template: '<div>{{content}}</div>'   
                })
                
                var vm = new Vue({
                     el: '#root'
                })
           </script>
     </body>

</html>

説明VUEの小道具と2つの小道具非特性

おすすめ