vue3 ＜script setup＞方式的defineProps、defineEmits父子组件通信

最新推荐文章于 2023-08-09 16:13:31 发布

jjw_zyfx

最新推荐文章于 2023-08-09 16:13:31 发布

阅读量381

点赞数

分类专栏：前端 vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/jjw_zyfx/article/details/129357488

版权

前端同时被 2 个专栏收录

296 篇文章 0 订阅

订阅专栏

vue

138 篇文章 1 订阅

订阅专栏

父组件

<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
// 1. name数据
import {computed, reactive, ref} from "vue";

// 1. 计算属性：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
const age = ref(16)
// 得到后年的年龄
const changeAge=(e)=>{
  console.log(e);
  age.value = e
}
</script>

<template>
  <h1 class="h1t">父组件</h1>
  <hr>
  <HelloWorld :age="age" @changeAge="changeAge"></HelloWorld>

</template>

<style lang="less" scoped>
.h1t{
  height: 100px;
  background-color: deeppink;
  text-align: center;
  font-size: 50px;
  line-height: 100px;
}
</style>

子组件

<script setup>
// 接收属性参数
defineProps({
  age: {
    type: Number,
    required: true
  }
})
// 统一接收属性的方法，多个用逗号隔开
const emit = defineEmits(["changeAge"])
const changeAge = ()=>{
  emit("changeAge", 50)
}
</script>

<template>
  <div class="greetings">
    <div @click="changeAge">修改年龄</div>
    <h1 class="green">{{ age }}</h1>
  </div>
</template>

<style scoped>

</style>