2-5 vue 自定义事件 event up
2017-09-05 本文已影响103人
codeTao
自定义事件 event up
-
我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！
-
每个 Vue 实例都实现了事件接口(Events interface)，即：
- 使用 $on(eventName) 监听事件
- 使用 $emit(eventName) 触发事件
另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
-
一个简单的官方案例帮助我们来理解：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{ total }}</p>
<button-counter v-on:clickcounter="clicktotal"></button-counter>
<button-counter v-on:clickcounter="clicktotal"></button-counter>
</div>
<script src="js/vue.js"></script>
<script>
// 1. 定义子组件
Vue.component('button-counter', {
template: '<button v-on:click="clickcounter">
{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
clickcounter: function () {
this.counter += 1;
// 触发事件
this.$emit('clickcounter');
}
}
})
new Vue({
el: '#app',
data: {
total: 0
},
methods: {
clicktotal: function () {
this.total += 1;
}
}
})
</script>
</body>
</html>
运行结果：子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。
<strong>父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译</strong>
- 上面话的意思在于：在子组件中定义的数据，只能用在子组件的模板；在父组件中定义的数据，只能用在父组件的模板。如果父组件的数据要在子组件中使用，则需要子组件定义props。
