vue.js学习笔记（3）— $emit 作用快速了解
$emit 触发当前实例上的事件，也可以简单的理解为触发父组件上的事件（向上冒泡），实例（当前实例）如下：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>sessiontitle>
<script src="https://unpkg.com/vue/dist/vue.js">script>
<style type="text/css">
#session {
width: 600px;
margin: 0 auto;
text-align: center;
}
style>
head>
<body>
<div id="counter-event-example">
<button-counter v-on:increment="incrementTotal">button-counter>
div>
<script>
Vue.component('button-counter', {
template: '',
methods: {
incrementCounter: function () {
alert("我是组件");
this.$emit('increment')
}
}
})
new Vue({
el: '#counter-event-example',
methods: {
incrementTotal: function () {
alert("我是当前实例");
}
}
})
script>
body>
html>
当点击“点我哒”的时候，会依次跳出下面两个 alert，根据前后跳出的顺序我们可以清楚的看到事件的前后触发顺序，如图：
这样是不是就很清楚的理解 $emit 的作用了，:）
其中，我们看Vue的官方文档的时候，会发现它是这样介绍的，如图下：
从介绍当中我们可以看到，触发的方法要用字符串的方式来写（上面的例子就是这样的），另外，还提到它是可以向上传递参数的，好了，又一个例子来了，请接好：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>playloadtitle>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js">script>
head>
<body>
<div id="message-event-example" class="demo">
<p v-for="msg in messages">{{ msg }}p>
<button-message v-on:message="handleMessage">button-message>
div>
<script type="text/javascript">
Vue.component('button-message', {
template: `<div>
<input type="text" v-model="message" />
<button v-on:click="handleSendMessage">Send</button>
</div>`,
data: function () {
return {
message: 'test message'
}
},
methods: {
handleSendMessage: function () {
this.$emit('message', { message: this.message })
//this.$emit('message', this.message)
//this.$emit('message', [this.message])
}
}
})
new Vue({
el: '#message-event-example',
data: {
messages: []
},
methods: {
handleMessage: function (payload) {
console.log(payload);
this.messages.push(payload.message)
//this.messages.push(payload.message)
//this.messages.push(payload[0])
}
}
})
script>
body>
html>
大家看到我的注释了，这其中呢，$emit 的传递的数据参数是可以定义不同的形式的，大家可以download下来，看一看不同的形式有什么具体的区别，挺有意思的。