Vue2中:
$emit
子组件绑定自定义事件,触发执行后,传给父组件,父组件需要用事件监听来接收参数
父组件:
<template>
<div id="app">
<TodoItem @getMsg="showMsg"></TodoItem>
{{ title }}
</div>
</template>
<script>
import TodoItem from './components/so.vue'
export default {
name: 'App',
components: {
TodoItem
},
methods: {
showMsg(title) {
this.title = title
}
},
data() {
return {
title: ''
}
},
}
</script>
<style>
#app {
margin: 20px auto 20px 20px;
}
</style>
子组件:
<template>
<div class="so">
<p>子组件</p>
</div>
</template>
<script>
export default {
name: "todo-item",
mounted() {
this.$emit('getMsg', '我从子组件过来的')
}
}
</script>
<style scoped>
</style>
Vue3中:
vue3中无法直接使用$emits,需要使用const emit = defineEmits(['(对应方法名)'])的方式来向父组件传递信息,一般在onMounted(() => {})中去执行传递方法的事件,如:emit("getMsg", "我来自子组件"),然后父组件在子组件上使用@getMsg="showMsg"的方式来获取传入的信息,注意:getMsg是对应的子组件的方法名,此方法名称自定义,showMsg为父组件的方法名称也可以自定义
父组件:
<template>
<TodoItem @getMsg="showMsg"></TodoItem>
{{ title }}
</template>
<script>
import TodoItem from './components/so'
import { ref } from 'vue'
export default {
name: 'App',
components: {
TodoItem
}
}
</script>
<script setup>
const title = ref("")
const showMsg = (innerTitle) => {
title.value = innerTitle
}
</script>
<style>
#app {
margin: 20px auto 20px 20px;
}
</style>
子组件:
<template>
<div class="so">
<p>子组件</p>
</div>
</template>
<script>
import { onMounted, defineEmits } from 'vue'
export default {
name: "todo-item",
}
</script>
<script setup>
const emit = defineEmits(['getMsg'])
onMounted(() => {
emit("getMsg", "我来自子组件")
})
</script>
<style scoped>
</style>