可以参照这一篇看看
以下是我自己写了一个练练手,玩一玩
下面创建了一个单文件组件Button.vue,接着在App.vue中引入这个组件
Button.vue
<template>
<div>
<el-button @click="done">自定义按钮</el-button>
</div>
</template>
<script setup>
import { defineProps,defineEmits } from "vue";
const props = defineProps({
msg: String,});
const emit = defineEmits(["click"]);
function done() {
emit("callback","传给父组件:" + props['msg']);
}
</script>
App.vue
<template>
<el-row>
<el-button circle><el-icon><Search/></el-icon></el-button>
</el-row>
{{text}}
<My-Button :msg="text" @callback="myclick"/>
</template>
<script setup>
import { Search } from '@element-plus/icons'
import { onMounted } from '@vue/runtime-core'
import MyButton from "./components/Button"
onMounted(() =>{
console.log('666666')
})
const text = '变量'
function myclick(msg) {
console.log(msg)
}
</script>
效果如下
点击“自定义按钮”,父组件传入子组件值,子组件再通过自定义事件回调将值传回父组件
原文地址:https://blog.csdn.net/lee576/article/details/43699243
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。