Vueのコンポーネント

1、コンポーネントの概念
コンポーネント(Component)はVue.jsの最も強力な機能の一つです.コンポーネントはHTML要素を拡張し、再利用可能なコードをカプセル化することができます.コンポーネントシステムは、独立した多重化可能な小さなコンポーネントで大規模なアプリケーションを構築することができ、ほとんどのアプリケーションのインタフェースはコンポーネントツリーとして抽象化することができます.
2.グローバルコンポーネントの登録(すべてのインスタンスで使用可能)
グローバルコンポーネント構文フォーマットを登録するには、次のようにします.

Vue.コンポーネント(tagName,options)tagNameはコンポーネント名、optionsは構成オプションです.

登録後、コンポーネントを呼び出すには、

を使用します.

    app


    app1


    //       runoob
    Vue.component('runoob', {
        template: '<h1>       !</h1>'
    });
    //   Vue   
    new Vue({
        el: '#app'
    });
    new Vue({
        el:'#app1'
    })

3、ローカルコンポーネントの登録

インスタンスオプションにローカルコンポーネントを登録することもできます.これにより、コンポーネントはこのインスタンスで

しか使用できません.

    app


    app1


    let Child = {
        template: '<h1>     !</h1>'
    };
    //   Vue   
    new Vue({
        el: '#app',
        components: {
            // <runoob>         
            'runoob': Child
        }
    });
    new Vue({
        el:'app1'
    })

4、親子コンポーネント通信(props)

propは、親コンポーネントがデータを渡すためのカスタム属性です.親コンポーネントのデータはpropsを介してサブコンポーネントにデータを渡す必要があります.サブコンポーネントはpropsオプションで「prop」:

を明示的に宣言する必要があります.

注意:propは一方向にバインドされています.親コンポーネントの属性が変化すると、サブコンポーネントに伝達されますが、逆にはなりません.

    


    let child = {
        template: `<div><p>      {{name}}</p></div>`,
        //    props
        props: ["name"]
    };
    let parent = {
        //  
        template: `<div>
                    <h1>      </h1>
                    <child :name="username"></child>
                    </div>`,
        //       
        components: {
            child: child
        },
        data() {
            return {
                username: "peiqi"
            }
        }
    };
    //  Vue   
    const app = new Vue({
        el: "#app",
        //        parent
        components: {
            parent: parent
        }
    })

動的Propsは、HTMLプロパティをv-bindで1つの式にバインドするのと同様に、propsの値を親コンポーネントのデータにv-bindで動的にバインドすることもできます.親コンポーネントのデータが変化するたびに、この変化は子コンポーネントにも伝わります:

    

      
      

      
    

 

//   
Vue.component('child', {
  //    props
  props: ['message'],
  //        vm      "this.message"     
  template: '<span>{{ message }}</span>'
})
//      
new Vue({
  el: '#app',
  data: {
    parentMsg: '     '
  }
})

以下の例では、v-bind命令がtodoを各重複コンポーネントに伝達する:

    

    
      

 

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
new Vue({
  el: '#app',
  data: {
    sites: [
      { text: 'Runoob' },
      { text: 'Google' },
      { text: 'Taobao' }
    ]
  }
})

5、子親コンポーネント通信

では、propsは一方向にバインドされています.親コンポーネントの属性が変化すると、サブコンポーネントに伝達されますが、逆にはなりません.

では、親通信を一気に実現するにはどうすればいいのでしょうか.サブコンポーネントにイベントをバインドし、$emitでイベントをコミット(パラメータを携帯可能)、親コンポーネントに対応するイベントをバインドする処理関数で、サブコンポーネントの通信を実現できることがわかりました.

    


    //                 
    let child = {
        template: `<div>
                        <p>      </p>
                        <button @click="on_click">          </button>
                    </div>`,
        methods: {
            on_click: function () {
                //            
                this.$emit("show_balance", this.balance)
            }
        },
        data() {
            return {
                balance: 998,
            }
        }
    };
    let parent = {
        template: `<div>
                    <h1>      </h1>
                    <child @show_balance="my_func"></child>
                      <span>{{p_balance}}</span>
                    </div>`,
        //       
        components: {
            child: child
        },
        data() {
            return {
                username: "peiqi",
                p_balance: ""
            }
        },
        methods: {
            my_func: function (data) {
                this.p_balance = data
            }
        }
    };
    //  Vue   
    const app = new Vue({
        //     
        el: "#app",
        //        
        components: {
            parent: parent
        }
    })

6、親子以外のコンポーネント通信

非親子コンポーネントの通信は、バインディングイベントによって解決することができず、中間Vueインスタンスを生成することによって親子コンポーネントの通信の媒体として、時間がVueインスタンスを通過する必要がある.on()は,伝達されたイベントを処理することで,2つの相互に関係のないコンポーネント間の通信を完了することができる.

思想が滑らない限り、方法はいつも問題より多い!!!

    
    


    //      Vue        
    let Event = new Vue();
    let alex = {
        template: `<div>
                    <p>Alex</p>
                    //    
                    <button @click="on_click">       </button>
                    </div>`,
        methods: {
            on_click: function () {
                //    、    
                Event.$emit("alex_said", this.money)
            }
        },
        //     return     
        data() {
            return {
                money: 10000,
            }
        }
    };
    let wenzhou = {
        template: `<div>
                        <p>  </p>
                        {{wz_money}}
                    </div>`,
        //         
        mounted() {
            let that = this;
            Event.$on("alex_said", function (data) {
                that.wz_money = data;
                console.log(this)
            })
        },
        data() {
            return {
                wz_money: "",
            }
        }
    };
    //  Vue   
    const app = new Vue({
        //     
        el: "#app",
        //        
        components: {
            alex: alex,
            wenzhou: wenzhou,
        }
    })

7、mixins繰り返しコードパッケージ、djangoのマザーボードに類似する

    
    



    let base = {
        methods: {
            on_show: function () {
                this.show = true
            },
            on_hide: function () {
                this.show = false
            }
        },
        data() {
            return {
                show: false
            }
        }
    };
    let popup = {
        template: `<div>
                        <button @click="on_show">    </button>
                        <button @click="on_hide">    </button>
                        <p v-show="show">  popup</p>
                   </div>`,
        mixins: [base],
        data() {
            return {
                show: true
            }
        }
    };
    let tip = {
        template: `<div>
                    <button v-on="{mouseenter: on_show, mouseleave: on_hide}">        </button>
                    <p v-show="show">        </p>
                </div>`,
        mixins: [base]
    };
    const app = new Vue({
        el: "#app",
        components: {
            popup: popup,
            tip: tip,
        }
    })

8、slotスロット

    
        
       
        
    
    



    let test = {
        template: "#panel-tpl"
    };
    const app = new Vue({
        el: "#app",
        components: {
            test: test
        }
    })