Vue.js学習ノート13カスタムコンポーネント

7941 ワード

Vueではコンポーネントをカスタマイズできます.
1.template(htmlコンテンツのカスタマイズ)
いろいろな定義がありますが、以下のようなhtmlヒントがあり、便利で、間違いにくいことをお勧めします.
次の点に注意してください.
1.1コンポーネント別名がアルパカ命名法myCom 1の場合、使用するラベルは書くのが面倒で、小文字を使うことをお勧めします.
1.2 templateラベルのhtml内容は、すべて1つの最外層要素に含まれなければならない.2つの最外層要素があってはならない.次の例ではdivを削除すると、h 3とh 5はいずれも最外層になり、エラーが発生する.

"divApp">
        
        
    
    
    
    
        <span style="color:#008000;">//</span><span style="color:#008000;">      ：mycom1，  template   id：tmp1</span>
        Vue.component(<span style="color:#800000;">'</span><span style="color:#800000;">mycom1</span><span style="color:#800000;">'</span><span style="color:#000000;">, {
            template: </span><span style="color:#800000;">'</span><span style="color:#800000;">#tmp1</span><span style="color:#800000;">'</span><span style="color:#000000;">
        })

        </span><span style="color:#0000ff;">var</span> v = <span style="color:#0000ff;">new</span><span style="color:#000000;"> Vue({
            el: </span><span style="color:#800000;">'</span><span style="color:#800000;">#divApp</span><span style="color:#800000;">'</span><span style="color:#000000;">,
            data: {
            },
            methods: {}
        })
    </span>

以上は共通コンポーネントの定義と使用ですが、プライベートコンポーネントであれば、直接Vueのインスタンスでcomponents関数で定義すればいいのですが、ここではhtmlの内容を直接関数に書きますが、これはお勧めしません.ヒントがないからです.

var v = new Vue({
            el: '#divApp',
            data: {
            },
            methods: {},
            components:{
                mycom2: {
                    //template:'#tmp2'
                    template:'    '
                }
            }
        })

使用方法は、共通コンポーネントと同様ですが、プライベートなため、定義されたVueインスタンスの制御コンテナでのみ使用できます.

 "divApp">

2. data
templateはHtmlの内容を定義し、dataはデータ部分を定義することができ、コンポーネントのdataはfunctionでなければならないことに注意し、1つのオブジェクトを返し、Vueインスタンスのdataのように直接オブジェクトに書くことはできません.

 //      ：mycom1，  template   id：tmp1
        Vue.component('mycom1', {
            template: '#tmp1',
            data: function () {
                return {
                    msg:'   data  msg'
                }
            }
        })

使用方法は簡単で、templateタグで直接{}}で呼び出せばいいので、Vueインスタンスを呼び出すdataの属性と同じですが、対応するtemplateタグでしか使えません.

3.methods
Vueインスタンスで定義されているように、コンポーネントではメソッドも定義できます.

//      ：mycom1，  template   id：tmp1
        Vue.component('mycom1', {
            template: '#tmp1',
            data: function () {
                return {
                    msg:'   data  msg'
                }
            },
            methods: {
                changeText() {
                    this.msg = '       ';
                }
            }
        })

使用も全く同じです

 
            {{msg}}
                 template  
              ！
            "button" value="    " v-on:click="changeText" />

コンポーネントを使用する場合は、Vueにラベルを付ける必要があります.コンポーネントidは文字列なので、付けないとVueの変数として扱われます.

is="'mycom2'">

前述したように、単一引用符を付けないとVueの変数として扱われるので、Vueインスタンスで変数を定義してもよいし、コンポーネントの切り替えを制御し、状況に応じてcomNameの値を変更すればよい.

is="comName">
    
 <span style="color:#0000ff;">var</span> v = <span style="color:#0000ff;">new</span><span style="color:#000000;"> Vue({
            el: </span><span style="color:#800000;">'</span><span style="color:#800000;">#divApp</span><span style="color:#800000;">'</span><span style="color:#000000;">,
            data: {
                comName: </span><span style="color:#800000;">'</span><span style="color:#800000;">mycom1</span><span style="color:#800000;">'</span><span style="color:#000000;">
            },
            methods: {},
            
        })
    </span>

下一篇:
Vue.js学習ノート12 Vue Ajaxリクエスト開始
転載先:https://www.cnblogs.com/luyShare/p/11571251.html

vuexの使用中にcommit未定義エラーが発生しました

勉強するjs心得