- 想实现在父组件中引用子组件,点击子组件后可改变父组件中的属性值,此时用事件进行通信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>18</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data() {
return {count: 1}
},
methods: {
handleAddOne() {
this.count += 1
}
},
// 此处注意:监听事件不用驼峰命名法,用'-'
template: `<div><counter :count="count" @add-one="handleAddOne"/></div>`
});
app.component('counter', {
props:['count'],
methods: {
addOne(){
// 子组件告诉父组件通过addOne事件去修改count的值
this.$emit('addOne')
}
},
template: `<div @click="addOne">{{count}}</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
注:子组件在告诉父组件触发事件的时候,还可以传参数,该参数可以在父组件中使用(可以传递多个参数)如:
<script>
const app = Vue.createApp({
data() {
return {count: 1}
},
methods: {
handleAddOne(param) {
this.count += param;
}
},
// 此处注意:监听事件不用驼峰命名法,用'-'
template: `<div><counter :count="count" @add-one="handleAddOne"/></div>`
});
app.component('counter', {
props:['count'],
methods: {
addOne(){
// 子组件告诉父组件通过addOne事件去修改count的值
this.$emit('addOne', 2)
}
},
template: `<div @click="addOne">{{count}}</div>
`
})
const vm = app.mount('#root')
</script>
- 可以通过在子组件中添加emits属性增加代码维护的可读性,说明都向外触发了哪些事件
<script>
const app = Vue.createApp({
data() {
return {count: 1}
},
methods: {
handleAddOne(param) {
this.count += param;
}
},
// 此处注意:监听事件不用驼峰命名法,用'-'
template: `<div><counter :count="count" @add-one="handleAddOne"/></div>`
});
app.component('counter', {
props:['count'],
emits:['addOne'],
methods: {
addOne(){
// 子组件告诉父组件通过addOne事件去修改count的值
this.$emit('addOne', 2)
}
},
template: `<div @click="addOne">{{count}}</div>
`
})
const vm = app.mount('#root')
</script>