vue3中子组件通过defineProps获取父组件传的值，通过defineEmits事件修改值

葫芦娃y

于 2024-01-26 18:29:04 发布

阅读量1.2k

点赞数 15

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

本文链接：https://blog.csdn.net/weixin_43857653/article/details/135872534

版权

前端同时被 2 个专栏收录

47 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中，如何通过父组件的`ref`和子组件的`props`以及`emits`实现父子组件之间的数据交互，展示了修改子组件名称的简单过程。

摘要由CSDN通过智能技术生成

一、父组件

//父组件
<template>
  <div class="box">
    <h1>父组件</h1>
    <hr />
    <Child info="子组件" @changeName='getName' name="name"></Child>
  </div>
</template>
<script setup lang="ts">
import Child from "./Child.vue";
import { ref } from "vue";

let name= ref('yyy');

const getName = (pyload)=>{
consoe.log('获取子组件传来的值',pyload)

}
</script>

<style scoped>
.wrap{
  width: 100vw;
  height:100;
}
</style>

二、子组件

<template>
  <div class="box">
    <h1>子组件</h1>
    <h3>姓名：{{name}}</h3>
    <button @clikc='onChange'>修改名称</button>
  </div>
</template>
<script setup lang="ts">
import { ref, defineProps，defineEmits} from 'vue'
const props = defineProps(['name']); 
const emit= defineEmits(['changeName'])
const onChange = ()=>{
	emit('changeName','修改的名称')
}

</script>