vue3使用2--子传父--传递消息（setup，emit）

最新推荐文章于 2024-08-02 09:29:40 发布

chencaw

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量2k

点赞数 1

分类专栏： vue3

本文链接：https://blog.csdn.net/chencaw/article/details/119909454

版权

vue3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文展示了Vue.js中父子组件之间的数据传递和事件处理。父组件通过`props`将数据`msg`传递给子组件，并提供了一个`sendmsg`方法来更新数据。子组件接收到`msg`并显示，同时监听`chenemit`事件，当用户触发按钮点击时，子组件调用`emitxxx`方法分发`chenemit`事件，向父组件传递字符串`pp`。

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

1、父组件

<template>
  <h2>APP父级组件</h2>
  <h3>msg:{{msg}}</h3>
  <!-- <button @click="msg += '==='">更新数据</button> -->
  <button @click="sendmsg">更新数据</button>
  <hr/>
  <child :msg="msg" @chenemit="chenemit"/>

</template>
<script lang="ts">
import { defineComponent, ref} from 'vue'
//引入子级组件child
import Child from './components/Child.vue'
export default defineComponent({
  name: 'App',
  //注册组件
  components:{
    Child
  },
  setup(){
    //定义一个Ref类型的数据
    const msg = ref('hello how are you')
    function sendmsg(){
      msg.value += '==='
    }
    function chenemit(txt:string){
      msg.value += txt
    }
    return{
      msg,
      sendmsg,
      chenemit
    }
  }
})
</script>
<style>
</style>

2、子组件

<template>
    <h2>Child子级组件</h2>
    <h3>msg:{{msg}}</h3>
    <button @click="emitxxx">分发事件</button>
</template>

<script lang="ts">
import { defineComponent} from 'vue'

export default defineComponent({
  name: 'Child',
  props:['msg'],

  setup(props,context){
    console.log(props.msg)
    console.log('setup执行了')
     
    //按钮的点击事件的回调函数
    function emitxxx(){
      context.emit('chenemit','pp')  //朝着定义的'chenemit'发送消息
    }
    return{
      emitxxx
      //setup中一般都是返回一个对象，对象中的属性和方法都可以在html模板中直接使用
    }
  }

})
</script>

<style>
</style>

3、结果