1. カスタムイベントの機能
親コンポーネントはprops子コンポーネントにデータを渡すために を使用しますが、子コンポーネントがデータを返したい場合は自定义事件!を使用する必要があります。
2. カスタムイベントの使い方
カスタム イベントをバインドするために使用できますv-on。各 Vue インスタンスはイベント インターフェイス (イベント インターフェイス) を実装します。つまり、次のとおりです。
$on(eventName,fn)イベントをリッスンするために使用します$emit(eventName, data)トリガーイベントを利用する
<template>
<div>
<p><a @click="click()">click</a></p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
id: {
type: String,
default: "CT",
},
},
data() {
return {
};
},
mounted() {
console.log(this.$options.name);
},
methods: {
click() {
this.$emit("getData", "from CT data");
},
},
};
</script>
<template>
<div>
<p>BT</p>
<CT ref="ct"></CT>
</div>
</template>
<script>
import CT from "./CT.vue";
export default {
name: "BT",
components: {
CT },
data() {
return {
};
},
mounted() {
this.$refs.ct.$on("getData", (data) => {
console.log(data);
});
},
methods: {
},
};
</script>
3.$on(eventName,fn)別の書き方
v-on:eventName親コンポーネントは、 ( ) を直接使用して、子コンポーネントが使用されている場所で、子コンポーネント@eventNameによってトリガーされたイベントをリッスンできます。
<template>
<div>
<p><a @click="click()">click</a></p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
id: {
type: String,
default: "CT",
},
},
data() {
return {
};
},
mounted() {
console.log(this.$options.name);
},
methods: {
click() {
this.$emit("getData", "from CT data");
},
},
};
</script>
<template>
<div>
<p>BT</p>
<CT v-on:getData="getData($event)"></CT>
<CT @getData="getData2($event)"></CT>
</div>
</template>
<script>
import CT from "./CT.vue";
export default {
name: "BT",
components: {
CT },
data() {
return {
};
},
mounted() {
},
methods: {
getData(event) {
console.log("getData: ", event);
},
getData2(event) {
console.log("getData2: ", event);
},
},
};
</script>
第 4 に、カスタム イベントは 1 回だけトリガーされます。$once(eventName,fn)
<template>
<div>
<p><a @click="click()">click</a></p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
id: {
type: String,
default: "CT",
},
},
data() {
return {
};
},
mounted() {
console.log(this.$options.name);
},
methods: {
click() {
this.$emit("getData", "from CT data");
},
},
};
</script>
<template>
<div>
<p>BT</p>
<CT ref="ct"></CT>
</div>
</template>
<script>
import CT from "./CT.vue";
export default {
name: "BT",
components: {
CT },
data() {
return {
};
},
mounted() {
this.$refs.ct.$once("getData", (data) => {
console.log(data);
});
},
methods: {
},
};
</script>
5. バンドル解除$off('eventName')
<template>
<div>
<p><a @click="click()">click</a></p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
id: {
type: String,
default: "CT",
},
},
data() {
return {
};
},
mounted() {
console.log(this.$options.name);
},
methods: {
click() {
this.$emit("getData", "from CT data");
},
},
};
</script>
<template>
<div>
<p>BT - <span @click="offEvent()">offEvent</span></p>
<CT ref="ct"></CT>
</div>
</template>
<script>
import CT from "./CT.vue";
export default {
name: "BT",
components: {
CT },
data() {
return {
};
},
mounted() {
this.$refs.ct.$on("getData", (data) => {
console.log(data);
});
},
methods: {
offEvent() {
this.$refs.ct.$off("getData");
},
},
};
</script>
vm.$off('eventName'): カスタム イベントのバインドを解除しますvm.$off(['eventName', 'demo']): 複数のカスタム イベントのバインドを解除しますvm.$off(): すべてのカスタム イベントのバインドを解除します