gpt4 book ai didi

javascript - VueJS如何用emit代替dispatch

转载 作者:行者123 更新时间:2023-12-03 04:42:24 25 4
gpt4 key购买 nike

我想从子组件向父组件发送信号。我不想使用 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 函数替换父级“事件”?

最佳答案

如果您开始监听 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>

关于javascript - VueJS如何用emit代替dispatch,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43027053/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com