Vue3 使用 script-setup 语法糖

最新推荐文章于 2026-04-09 08:30:00 发布

原创最新推荐文章于 2026-04-09 08:30:00 发布 · 1.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#ui #.net #ci

收录于

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文展示了如何在Vue中创建一个自定义组件`Button.vue`，并在`App.vue`中引入并使用它。通过`defineProps`和`defineEmits`实现了属性传递和自定义事件回调，实现父子组件间的数据通信。点击子组件的按钮，会将父组件传入的值通过自定义事件回传给父组件，并在控制台打印。

可以参照这一篇看看

以下是我自己写了一个练练手，玩一玩

下面创建了一个单文件组件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>

效果如下