Vue3子传父

最新推荐文章于 2024-08-28 00:15:00 发布

leveretz

最新推荐文章于 2024-08-28 00:15:00 发布

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端

原文链接：https://www.jianshu.com/p/8686eb61c67f

版权

本文详细介绍了在Vue3中如何实现子组件向父组件传递数据的过程，通过一个具体的代码示例展示了如何使用`$emit`触发自定义事件，并在父组件中监听并接收来自子组件的数据。同时，还涉及到Vuex的使用，展示了如何在组件间共享状态。

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

原文地址：Vue3子传父 - 简书

1.父组件

<template>
  <div class="home" @click="clik1">
    {{ $store.state.aaa }}
  </div>
  <about :data=name @clickFu = receive></about>
</template>

<script lang="ts">
import { defineComponent ,ref} from 'vue';
import about from './About.vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'Home',
  components: {
    about
  },
  setup(){
    const store = useStore();
    const name = ref('小叶')
    function clik1(){
      store.commit('add',10)
    }
    function receive(e: any){
       console.log(e)
    }
    return{
      clik1,
      name,
      receive
    }
  }
});
</script>

2.子组件

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

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'About',
  components: {
    
  },
  props:['data'],
  setup(props,context){
    console.log(props.data)//可以拿到父组件的数据
    function clickSon(){
      context.emit('clickFu','11111')
    }
    return{
      clickSon
    }
  }
});
</script>