BETA

vue.jsのコンポーネント

投稿日:2020-07-24
最終更新:2020-07-24

html

    <div id="app">  
      <my-hello>maichan</my-hello>  
      <my-hello>muuko</my-hello>  
      <my-hello>yuki</my-hello>  
    </div>  

js

Vue.component('my-hello',{  
  template: '<div>hello <slot>default</slot> san!</div>'  
});  

new Vue({  
    el: '#app',  
});  

htmlのコンテンツを,テンプレートに埋め込める。

表示

hello maichan san!
hello muuko san!
hello yuki san!

slotが複数

html

      <my-hello>  
        <h3 slot="header">youkoso vue.js</h3>  
        <p>p1 study toggether</p>  
        <span slot="footer">my project</span>  
        <br slot="footer">  
        <p>p2 question to board</p>  
        <a slot="footer" href="#">q&a</a>  
      </my-hello>  

js

Vue.component('my-hello',{  
  template: '<div>' +  
    '<header><slot name="header"></slot></header>' +  
    '<div><slot></slot></div>' +  
    '<footer><slot name="footer"></slot></footer>' +  
    '</div>'  
});   

new Vue({  
  el: '#app',  
});  

区別するため,htmlのコンテンツにslot属性をつけて,属性値を指定する。
jsのtemplateの順(header,なし,footer)に並ぶ。

表示

youkoso vue.js
p1 study toggether
p2 question to board
my project
q&a

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@mihiraTakashiの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう