Vue中$emit的用法
一句话理解:子组件可以使用$emit触发父组件的自定义监听例如子组件 item.vue<template><button @click="$emit('test', 5)">触发父组件的test监听, 参数为5</button></template><script>// ...</script> 父组件 xxx.vue<
·
一句话理解:
子组件可以使用$emit触发父组件的自定义监听
例如
子组件 item.vue
<template>
<button @click="$emit('test', 5)">
触发父组件的test监听, 参数为5
</button>
</template>
<script>
// ...
</script>
父组件 xxx.vue
<template>
<div>
<item @test="log"/> //监听test
</div>
</template>
<script>
export default {
// ...
methods: {
log(arg) {
console.log(arg)
}
}
// ...
}
</script>
Vue官方给出的 Todo App 例子中就有使用到 $emit :Simple Todo App with Vue - CodeSandbox
如果需要传递多个参数,可以利用对象
<template>
<button @click="$emit('test', {a: 1, b: true})">
触发父组件的test监听
</button>
</template>
<script>
// ...
</script>
等同于
<template>
<button @click="send()">
触发父组件的test监听
</button>
</template>
<script>
export default {
// ...
methods:{
send() {
let data = {
a: 1,
b: true
}
this.$emit('test', data)
}
}
// ...
}
</script>
也可以不传参
<template>
<button @click="$emit('test')">
触发父组件的test监听
</button>
</template>
<script>
// ...
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)