setup语法糖中的props和emit

最新推荐文章于 2023-07-30 14:18:29 发布

辰辰北

最新推荐文章于 2023-07-30 14:18:29 发布

阅读量361

点赞数 1

文章标签： vue3 语法糖 setup

本文链接：https://blog.csdn.net/weixin_42943920/article/details/131027036

版权

1、关于子组件接收父组件的值–props：使用defineProps接收到以后，开袋即食。
在这里插入图片描述

2、关于子组件发送数据给父组件–emits：
子组件：

<template>
  <div>
    <p>About</p>
    <button @click="emitBtnClick">发送数据</button>
  </div>
</template>

<script setup>
const emits = defineEmits(["clickInfoName"])
function emitBtnClick () {
  emits("clickInfoName", "我是行李(参数)2333")
}
</script>

父组件：

<template>
  <div class="app">
    <p>App</p>
    <button @click="currentPage = Home">home</button>
    <button @click="currentPage = About">about</button>
    <!-- 父组件监听 -->
    <component :is="currentPage" @clickInfoName="test"></component>
  </div>
</template>

<script setup>
import About from './views/About.vue'
import Home from './views/Home.vue'
let currentPage = shallowRef(Home)

function test (payload) {
  console.log("监听到子组件发生了点击");
  console.log("我是行李(参数):", payload);
}
</script>