Vuejs2 Vue.js 2中的自定义事件
我试图弄清楚如何让子组件与父组件通信，而不必在它们之间进行硬绑定 据我所知，定制事件应该是最重要的。但我无法让父组件接收事件并对其执行操作 在下面的示例中，我希望单击Vuejs2 Vue.js 2中的自定义事件,vuejs2,vue-component,Vuejs2,Vue Component,我试图弄清楚如何让子组件与父组件通信，而不必在它们之间进行硬绑定 据我所知，定制事件应该是最重要的。但我无法让父组件接收事件并对其执行操作 在下面的示例中，我希望单击中的“Do stuff”按钮触发中的doStuff（）。我看到了表明按钮被单击的日志消息，但没有看到表明父级曾经接收到发出的消息的日志消息 示例HTML: <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdeliv
doStuff（）<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<parent>
<child></child>
</parent>
</div>
</body>
</html>
Vue.component('parent', {
props: [],
template: `
<div v-on:stuff="doStuff">
<h1>Hello World (from parent)!</h1>
<slot></slot>
</div>
`,
methods: {
doStuff: function() {
console.log('Do stuff');
}
}
});
Vue.component('child', {
props: [],
template: `
<div>
Hello World (from child)!<br>
<button v-on:click="performClick">Do stuff</button>
</div>
`,
methods: {
performClick: function() {
console.log('Do something');
this.$emit('stuff');
}
}
});
var app = new Vue({
el: '#app',
})
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<parent>
<child></child>
</parent>
</div>
</body>
</html>
Vue.component('parent', {
props: [],
template: `
<div v-on:stuff="doStuff">
<h1>Hello World (from parent)!</h1>
<slot></slot>
</div>
`,
methods: {
doStuff: function() {
console.log('Do stuff');
}
}
});
Vue.component('child', {
props: [],
template: `
<div>
Hello World (from child)!<br>
<button v-on:click="performClick">Do stuff</button>
</div>
`,
methods: {
performClick: function() {
console.log('Do something');
this.$emit('stuff');
}
}
});
var app = new Vue({
el: '#app',
})
Vue.component（'parent'{
道具：[]，
模板：`
世界你好（来自家长）！
`,
方法：{
doStuff:function（）{
log（'Do stuff'）；
}
}
});
Vue.component（'子'{
道具：[]，
模板：`
你好，世界（来自儿童）！
做事
`,
方法：{
performClick:function（）{
log（'Do something'）；
这个。$emit（'stuff'）；
}
}
});
var app=新的Vue({
el:“#应用程序”，
})
Vue.component（'parent'{
道具：[]，
模板：`
世界你好（来自家长）！
`,
方法：{
doStuff:function（）{
log（'Do stuff'）；
}
}
});
Vue.component（'子'{
道具：[]，
模板：`
你好，世界（来自儿童）！
做事
`,
方法：{
performClick:function（）{
log（'Do something'）；
这个。$emit（'stuff'）；
}
}
});
var app=新的Vue({
el:“#应用程序”
})
close