2つのAPIの三つの要素：イベント

小道具は値を渡すに結合し、親コンポーネントサブアセンブリに一方向ダウンリンクデータを述べ前記親コンポーネントサブアセンブリにより、必要な値または他の通信要求を渡す場合、その実現プロップvueイベント監視システム（トリガ・イベントは、コールバック関数の実装を監視し、コールバック関数の質量参加を受け入れることができます）。

Vue内蔵イベントの完全なセットは、ロジックをトリガ：

v-on / @：元のHTML要素は、ネイティブのイベント、カスタムイベントやサブアセンブリをリッスン
.native：ルート要素のネイティブイベントトリガーのコンポーネント
$on：イベントリスナコンポーネント自体トリガー
$emitイベントのトリガ：
$off：アンインストールイベントリスナーコンポーネント自体
$once：一回のみ単一のモニタ、イベントリスナー、もはや有効で、その後、
$listeners：付属V-上のレジスタコンポーネントのラベル上のすべてのカスタムリスナーオブジェクト、キーイベント名、イベントリスナー関数に値。

V-上/ @

ビューにクリックします。vオンイベントとイベントの修飾子、およびDOM / jQueryのイベント内で

だから、親コンポーネントの通信に顔部品を達成するために、我々は親コンポーネントにできるv-on子コンポーネントタグにオープンイベントリスナーを結合し、内部のサブコンポーネントを使用$emitトリガイベントのを。

例のDEMOを見るにはクリックしてください

<div id="app">
    <p>this is event example for v-on/@<p>
    <!-- 绑定监听事件some-event -->
    <com-child @com-btn-click="handleChildClick"></com-child>
</div>

const comChild = Vue.extend({
    template: `<button @click="handleClick">我是子组件内定义的按钮，点击触发父级监听事件</button>`,
    methods: {
        handleClick() {
            this.$emit('com-btn-click',666)
        }
    }
})

const vm = new Vue({
    el: "#app",
    components: {
        comChild,
    },
    methods: {
        handleChildClick(val) {
            alert('我是由子组件触发的:' + val);
    }
    }
})

イベント名は常にケバブケースの形使用
アセンブリと小道具は異なるが、イベント名には、JavaScriptの変数として表示されるか、属性名を、ので、任意の自動ケースの変換は存在しませんしません。このイベントは、名前の必要性は、まさにこのイベントに耳を傾けるために使用される名前と一致するきっかけとなりました。
そして、理由はV-には、HTML要素にバインドされていますが、HTMLは大文字と小文字を区別しません。一般的なイベントの名前と複数の単語に基づいていますが、イベントの名前はすべて使用することを提案されたkebab-caseハイフンフォームを。

通過イベントパラメータ
サブアセンブリを$emitトリガイベントながら、値に、渡すことができv-on、受信した結合イベントリスナー。

// $emit第一个参数是监听器事件名，第二个是要传递的参数
this.$emit('some-event',666)

// 监听事件处理函数第一个参数即为接收的值
handleChildEvent(val) {
    alert('我是由子组件触发的:' + val)
}

`$on / $once`

$onイベントをリッスンとするオープン$emitイベントに耳を傾けるには同じコンポーネントのインスタンスにトリガされます。

<div id="app">
    <p>this is event example for $on<p>
    <com-child></com-child>
</div>

const comChild = Vue.extend({
    template: `<button @click="handleClick">我是子组件内定义的按钮，点击触发监听事件</button>`,
    data: () => {
        return {
            count: 0,
        }
    },
    methods: {
        handleClick() {
            this.count++
            this.$emit('comBtnClick',this.count)
        }
    },
    mounted() {
        this.$on('comBtnClick', (val) => {
            alert('我是由$on注册的监听子组件按钮点击事件'+val)
            if (val === 3) {
                console.log('卸载事件监听')
                this.$off('comBtnClick')
            }
        })
        this.$once('comBtnClick', (val) => {
            alert('我是由$once注册监听子组件按钮点击事件，只会触发一次'+val)
        })
    }
})

const vm = new Vue({
    el: "#app",
    components: {
        comChild,
    },
})

条件下での内部コンポーネントのような時間との実装を監視するなどの他のイベント、トリガ$once、または実装を監視し、もはや使用リスニング特定の条件下では$on配合$off。
それは限り、イベントはアクションの実装にトリガーされるように、この方法では、リスナーのコールバックメソッドに記述することができ、連続監視が、ある場合しかし、この方法は、ときにイベントダイレクトなハンドリングを行っています。

const comChild = Vue.extend({
    template: `<button @click="handleClick">我是子组件内定义的按钮，点击触发监听事件</button>`,
    methods: {
        handleClick() {
            // this.$emit('comBtnClick',888)
            this.comBtnClick(val)
        },
        comBtnClick(val) {
            alert('我是按钮点击触发执行'+val)
        }
    },
})

上記を使用して、$on / $emit内部の部品が唯一の目的は達成することができない実行し、通信コンポーネントサブアセンブリ親質量の値ならば、。この時点では、とに必要な$refsプロパティを実装。

ref単一の特性とHTMLネイティブ取得することができる要素上DOMのノードオブジェクト、アセンブリで使用されるラベルを、オブジェクトは、コンポーネントのインスタンスを取得することができます。

上記変形例の下で、使用して$on / $emit / $refs親コンポーネントサブアセンブリアセンブリにオブジェクトインスタンスを

<div id="app">
    <p>this is event example for $on / $emit / $refs<p>
    <com-child ref="comChild"></com-child>
</div>

const comChild = Vue.extend({
    template: `<div>
            <button @click="handleBtnClick">我是子组件内定义的按钮，点击触发监听事件</button>
            </div>`,
    methods: {
        handleBtnClick() {
            this.$emit('comBtnClick',999)
        },
    },
})

const vm = new Vue({
    el: "#app",
    components: {
        comChild,
    },
    mounted() {
        this.$refs.comChild.$on('outerSelfEvent', val => {
            console.log('组件按钮点击了')
        })
        this.$refs.comChild.$once('outerSelfEvent', val => {
            console.log('组件按钮点击了,我只监听执行一次')
        })
    }
})

$オフ

カスタムイベントリスナーを削除します。

パラメータなしの場合、すべてのイベントリスナーを削除します。
唯一のイベント場合は、すべてのイベントリスナーを削除します。
イベントとコールバックの両方の場合は、唯一の（コールバック関数がイベントを登録するときに匿名関数を書いている現時点では使用できません）このリスナーコールバックを削除します。

 <div id="app">
    <p>this is event example for $off<p>
    <com-child ref="comChild"></com-child>
</div>

const comChild = Vue.extend({
    template: `<div>
            <button @click="handleBtnClick1">点击触发触发组件内部监听事件elert</button>
            <button @click="handleBtnClick2">点击触发触发组件内部监听事件console</button>
            <button @click="handleUninstallAllListener">点击卸载组件内所有事件监听$off()</button>
            <button @click="handleUninstallTheEvent">点击卸载组件内指定事件监听器$off(event)</button>
            <button @click="handleUninstallTheEventCallback">点击卸载组件内指定监听器$off(event,cb)</button>
            </div>`,
    methods: {
        handleBtnClick1() {
            this.$emit('handleAlert')
        },
        handleBtnClick2() {
            this.$emit('handleConsole')
        },
        handleUninstallAllListener() {
            console.log('卸载所有监听器')
            this.$off()
        },
        handleUninstallTheEvent() {
            console.log('卸载指定事件handleAlert的所有监听器')
            this.$off('handleAlert')
        },
        handleUninstallTheEventCallback() {
            console.log('卸载指定事件handleConsole中的handleConsole2监听器')
            this.$off('handleConsole', this.handleConsole2)
        },

        handleConsole2() {
            console.log('监听器Console2')
        }

    },
    mounted() {
        this.$on('handleAlert',function () {
            alert('监听器alert1')
        })
        this.$on('handleAlert',function () {
            alert('监听器alert2')
        })
        this.$on('handleConsole',function () {
            console.log('监听器Console1')
        })
        this.$on('handleConsole',this.handleConsole2 )
    }
})

const vm = new Vue({
    el: "#app",
    components: {
        comChild,
    },
})

$リスナー

すべてのコンポーネントタグにV-のイベントリスナー親スコープによって登録が含まれています。
しかし、含まれていません。

.nativeデコレータネイティブのイベントリスナーを含みます
コンポーネントは、登録されたリスナーに$を使用します

次の例では、我々は、子コンポーネントタグネイティブイベント、2つのに結合しv-on、カスタムイベントの方法、$onカスタム・イベント・メソッド。
しかし、最後の$listeners2人の一つだけのプリントアウトv-onの方法をバインドするイベント。

<div id="app">
    <p>this is event example for $listeners<p>
    <com-child
        ref="comChild"
        @click.native="handleNativeClick"
        @child-btn-click-console="handelChildBtnClickConsole" @child-btn-click-alert="handelChildBtnClickAlert"
    ></com-child>
</div>

const comChild = Vue.extend({
    template: `<div>
            <button @click="handleBtnClick" >点击触发触发组件内部监听事件elert</button>
            </div>`,
    methods: {
        handleBtnClick() {
            this.$emit('child-btn-click-alert')
            this.$emit('child-btn-click-console')
            this.$emit('handleConsole')
        },

    },
    mounted() {
        this.$on('handleConsole',function () {
            console.log('$on绑定监听器')
        })
        // 打印出$listeners
        console.log('$listeners:', this.$listeners)
    }
})

const vm = new Vue({
    el: "#app",
    components: {
        comChild,
    },
    methods: {
        handelChildBtnClickAlert() {
            alert('v-on绑定$emit触发alert')
        },
        handelChildBtnClickConsole() {
            console.log("v-on绑定$emit触发console")
        },
        handleNativeClick() {
            alert('native click')
        }
    }
})

$listeners:
child-btn-click-alert: ƒ invoker()
child-btn-click-console: ƒ invoker()

VUEラーニング：27 - コンポーネント - 2つのAPIの三つの成分：イベント

2つのAPIの三つの要素：イベント

V-上/ @

`$on / $once`

$オフ

$リスナー

おすすめ