Vue3 使用 script-setup 语法糖

wuchangjian2021-11-04 23:03:44编程学习

可以参照这一篇看看

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

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

效果如下

 点击“自定义按钮”,父组件传入子组件值,子组件再通过自定义事件回调将值传回父组件

 

相关文章

取代微软Exchange,U-Mail邮件系统助力长城汽车金融协同办公

取代微软Exchange,U-Mail邮件系统助力长城汽车金融协同办公

天津长城滨银汽车金融有限公司(简称“长城汽车金融”)经中国银监会批准,成立...

竞业限制没有明确说明哪家公司,是否会违反?

【问题】竞业限制没有明确说明哪家公司,是否会违反? 【...

【机器学习】详解 转置卷积 (Transpose Convolution)

【机器学习】详解 转置卷积 (Transpose Convolution)

目录 一、转置卷积的背景 二、转置卷积的应用 三、转置卷积的区别 四、转置卷积的...

ubuntu18.04更改分辨率

ubuntu安装后分辨率只有一个选项,ubuntu安装后分辨率 ubun...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。