1-12 vue親子コンポーネント

vue親子コンポーネント

親子コンポーネント

コンポーネントは、協同作業を意味し、通常、親子コンポーネントは、コンポーネントAがそのテンプレートでコンポーネントBを使用している関係にある.

最も単純な親子コンポーネント

    

        
        

        
    





    //1.      
    var Child = Vue.extend({
        template:'![](images/pic1.jpeg)'
    });

    //2.      
    var Parent = Vue.extend({
        //     
       components:{
           'child-template':Child
       },
        template:'<div><child-template></child-template><p>     </p></div>'
    });

    var Parent2 = Vue.extend({
        components:{
            'child-template':Child
        },
        template:'<div><p>        !</p><child-template></child-template></div>'
    });

    //3.    
    Vue.component('parent-template', Parent);
    Vue.component('parent-template2', Parent2);

    //    
    Vue.component('my-child', Child);
    Vue.component('parent-component', Child);

    //4.vue  
    new Vue({
        el:'#app'
    });

親子コンポーネントの組合せ使用では、

という問題に注意してください.

>                   ！

```

   
   

```

>            

親タグで実際のDOMが生成されると、その内部のサブタグは通常のHTMLタグとして解析されて実行され、は標準的なHTMLタグではなく、ブラウザによってフィルタリングされるからです.