7.ヴュー - コンポーネント - コードワールド

まず、コンポーネントの分類

1.定義

コンポーネントは、HTML要素、再利用可能なコードのパッケージを拡張することができます。ハイレベルで、コンポーネントは、カスタム要素です。特長は以下のとおりです。コードの再利用、より明確になるようにページ構造、開発効率を向上させます。

2.サブアセンブリ

それはエルの定義でのみ使用することができ、それ以外の場合は有効になりません、別の場所で使用することはできません。

3.グローバル・コンポーネント

これは、ページ上の任意の場所に使用することができます。

コンポーネントの第二に、使用

1.サブアセンブリ

2.グローバル・コンポーネント

3.値によって父と息子

アセンブリにおいて、パラメータが宣言小道具を送信する必要があります
親コンポーネント内では、V-バインド：変数名=「変数」パスデータ

4.親子値が合格します

時間時間はルートインスタンスにアセンブリにデータを直接変更することは推奨されていない例外

$によってサブアセンブリは、（「カスタムイベント名を」）放出するカスタムイベントを投げます
V-Onで親コンポーネント：カスタムイベントリスナー関数名=アクションサブアセンブリは、イベントを投げます

注：コンポーネントでのイベント「addnum」問題が、ハンドラは「addNum」として登録されています。HTML属性は、大文字小文字は区別されず、キャメルケースイベントを聞くために、V-上で、DOMのテンプレートを使用する際に使用することはできませんのでご注意ください。あなたは、「アドオンNUM」ではなく「addNum」を使用する必要があります。

値5.アセンブリ

達成するために、ボタンアセンブリBをクリックするように自己増力成分Aの値は、サブアセンブリ1 - >サブアセンブリ2

（1）バスのVueに共通バスによってスローされたカスタムイベントでアセンブリを。$エミット（「カスタムイベント」、データ）
結合事象バスBUSに装着方法2サブアセンブリである。$オン（ 'カスタムイベント'（ヴァル）=> {...}）

（1）コードの領土

<div id="app">
    <my-alex></my-alex>
    <hr>
    <my-mjj></my-mjj>
</div>

（2）成分のコード

<script>
    // 借助一个空的Vue对象实现组件间通信
    let bus = new Vue();   // 大项目用这个VueX
    let A = {
        template: `
            <div>
                <h1>这是 子组件： my-alex </h1>
                <p>my-mjj被选中的次数：{{ num }}</p>
            </div>
        `,
        data() {
            return {
                num: 0
            }
        },
        mounted(){
            // 在文档准备就绪之后就要开始监听bus是否触发了 xuanwo 的事件
            /*
            bus.$on('xuanwo', function (val) {
                // this.num += 1;  // ?
                console.log(val);
                console.log(this);  // this 并不是组件A
            })
            */
            // on第一个参数是自定义事件名;第二个参数是回调函数
            bus.$on('xuanwo', (val)=> {
                // this.num += 1;  // ?
                console.log(val);
                console.log(this);  // this 是组件A
                this.num = val;
            })
        }
    };

    let B = {
        template: `
            <div>
                <h1>这是 子组件： my-mjj </h1>
                <button v-on:click="add">选我</button>
            </div>
        `,
        data(){
            return {
                num: 0
            }
        },
        methods: {
            add(){
                this.num += 1;
                // 利用bus对象抛出一个自定义事件
                bus.$emit('xuanwo', this.num);
            }
        }
    };

    let app = new Vue({
        el: '#app',
        data: {
            totalNum: 0
        },
        components: {
            'my-alex': A,
            'my-mjj': B
        }
    })
</script>

7.ヴュー - コンポーネント