VueJS如何用发射替换调度
Posted
技术标签:
【中文标题】VueJS如何用发射替换调度【英文标题】：VueJS how to replace dispatch with emit 【发布时间】：2017-08-19 00:26:18 【问题描述】：我想从子组件向父组件发送信号。我不想使用 Vuex，因为我的 VueJS 知识水平 Vuex 太复杂了。我正在使用单个文件组件。
child.vue
<script>
export default
name: 'ChildComponent',
methods:
// ajax post here ...
if (response.data.status === 'accepted')
this.$emit('send-data', 'accepted')
父.vue
<script>
import ChildComponent from './ChildComponent.vue'
export default
name: 'Parent',
data ()
return
stage: 1
,
components:
ChildComponent
,
// how can I replace 'events' with $on in a single file component and listen for events after all components have been created
events:
'send-data': function (dataResponse)
if (dataResponse === 'accepted')
this.stage = 2
VueJS 文档中的示例为父级显示了类似的内容：
var eventHub = new Vue()
created: function ()
eventHub.$on('add-todo', this.addTodo)
eventHub.$on('delete-todo', this.deleteTodo)
,
但我想随时收听事件，而不仅仅是创作。如何用 $on 函数替换父母的“事件”？
【问题讨论】：
在创建的事件上附加事件意味着，监听开始创建。它不限于创建步骤。 【参考方案1】：如果您开始监听 created 上的事件，这将适用于组件的整个生命周期。或者，您可以在使用组件时使用v-on 或@ 快捷方式将事件设置为触发。
例子
Vue.component('my-component',
template: '<div><button v-on:click="sendHello">hello</button></div>',
methods:
sendHello: function()
console.log('hello');
this.$emit('hello','hello')
);
new Vue(
el: '#app',
data:
message: 'Hello Vue.js!'
,
methods:
sayHi: function()
console.log('say hi')
)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>VueJs</title>
</head>
<body>
<div id="app">
<p> message </p>
<my-component v-on:hello='sayHi'></my-component>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</body>
</html>【讨论】：
以上是关于VueJS如何用发射替换调度的主要内容，如果未能解决你的问题，请参考以下文章