溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關怎么在Vue.js中通過自定義事件實現組件通信，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
組件通信
從父組件向子組件通信，通過props傳遞數據就可以了，但Vue組件通信的場景不止有這一種，歸納起來，組件之間的通信可以用下圖來表示：
自定義事件
當子組件需要向父組件傳遞數據時，就要用到自定義事件。子組件用**$ emit()來觸發事件**，父組件用**$ on()**來監聽子組件的事件。
父組件也可以直接在子組件的自定義標簽上使用v-on來監聽子組件觸發的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>自定義事件</title>
</head>
<body>
<div id="app">
<p>總數:{{total}}</p>
<my-component
@increase="handleGetTotal"
@reduce="handleGetTotal"></my-component>
</div>
<script>
Vue.component('my-component',{
template: '\
<div>\
<button @click="handleIncrease">+1</button>\
<button @click="handleReduce">-1</button>\
</div>',
data: function () {
return {
counter: 0
}
},
methods: {
handleIncrease: function () {
this.counter++;
this.$emit('increase', this.counter);
},
handleReduce: function () {
this.counter--;
this.$emit('reduce', this.counter);
}
}
});
var app = new Vue({
el: '#app',
data: {
total: 0
},
methods: {
handleGetTotal: function (total) {
this.total = total;
}
}
});
</script>
</body>
</html>
子組件有兩個按鈕，分別實現+1和-1的效果，在改變組件的data “counter”后，通過$emit()在把它傳遞給父組件，父組件使用v-on:increase和v-on:reduce監聽事件。
$emit()方法的第一個參數是自定義事件的名稱，后面的參數是要傳遞的數據，可以不填或者填寫多個。
注意：除了用v-on在組件上監聽自定義事件外，也可以監聽DOM事件，這時候可以用 .native修飾符表示監聽的是一個原生事件，監聽的是該組件的根元素：
<my-component v-on:click.native="handleClick"></my-component>
使用v-model
Vue 2.x 可以在自定義組件上使用v-model指令。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>使用v-model</title>
</head>
<body>
<div id="app">
<p>總數：{{total}}</p>
<my-component v-model="total"></my-component>
</div>
<script>
Vue.component('my-component',{
template: '<button @click="handleClick">+1</button>',
data: function () {
return {
counter: 0
}
},
methods: {
handleClick: function () {
this.counter++;
this.$emit('input',this.counter);
}
}
});
var app = new Vue({
el: '#app',
data: {
total: 0
}
});
</script>
</body>
</html>仍然是點擊按鈕+1的效果，不過這次組件$emit()的事件是特殊的input，在使用組件的父級，并沒有在<my-component>上使用@input=“handler”，而是使用了v-model板頂的一個數據total。這也可以稱作是一個語法糖，因為上面的示例可以間接地用自定義事件來實現：
<div id="myApp">
<p>總數：{{total}}</p>
<my-component1 @input="handlegetTotal"></my-component1>
</div>
<script>
Vue.component('my-component1',{
template: '<button @click="handleClick">+1</button>',
data: function () {
return {
counter: 0
}
},
methods: {
handleClick: function () {
this.counter++;
this.$emit('input',this.counter);
}
}
});
var myApp = new Vue({
el: '#myApp',
data: {
total: 0
},
methods: {
handlegetTotal: function (value) {
this.total = value;
}
}
});
</script>v-model還可以用來創建自定義的表單輸入組件，進行數據雙向綁定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>自定義表單輸入組件</title>
</head>
<body>
<div id="app">
<p>總數：{{total}}</p>
<my-component v-model="total"></my-component>
<button @click="handleReduce">-1</button>
</div>
<script>
Vue.component('my-component',{
props: ['value'],
template: '<input :value="value" @input="updateValue">',
methods: {
updateValue: function (event) {
this.$emit('input', event.target.value);
}
}
});
var app = new Vue({
el: '#app',
data: {
total: 0
},
methods: {
handleReduce: function () {
this.total--;
}
}
});
</script>
</body>
</html>
注意：實現這樣一個具有雙向綁定的v-model組件要滿足下面的兩個要求：
接受一個value屬性
在有新的value時觸發input事件
以上就是怎么在Vue.js中通過自定義事件實現組件通信，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
