vue3子传父

最新推荐文章于 2024-08-29 16:09:59 发布

范天缘

最新推荐文章于 2024-08-29 16:09:59 发布

阅读量638

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_42821697/article/details/121515726

版权

vue3 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文通过一个例子展示了Vue中父子组件如何进行数据传递和事件通信。在father.vue中，父组件将名称属性和一个点击方法传递给Son子组件。子组件接收到数据后，在其模板中展示，并监听点击事件，当点击时向父组件发射自定义事件，传递消息。

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

1.father.vue

<template>
   <div>
      <Son :data=name @clickFu="clickFu"></Son> 
   </div>
</template>
<script>
import Son from './son'
export default {
   components:{
      Son
   },
   setup() {
      const name = '小范'
      const clickFu = (e) =>{
         console.log(e,'父级')  
      }
      return{
         name,
         clickFu
      } 
   }
}
</script>

2.son.vue

<template>
   <div @click="clickSon">
{{data}}
   </div>
</template>
<script>

export default {
   props:['data'],
   setup(props,context) {
      console.log(props)
      console.log(context)
      console.log(props.data,'father text')
      const clickSon = ()=>{
         context.emit('clickFu','我是子组件传过来的') 
      }
      return{
         clickSon  
      }
   }
}
</script>