vue3使用emit传参

作者: small_zeo | 来源:发表于2021-05-09 19:07 被阅读0次

1. 父子传值

子组件 Child.vue
<template>
  <div>
    <button @click="childEmit">父组件传参</button>
  </div>
</template>
<script>
export default {
    setup(props,{emit}){  
        function childEmit () {
            emit('my-emit', '我是子组件值')
        }
        return{
            childEmit
        }
    }
};
</script> 
父组件 
<template>
  <div>
    <child @my-emit="parentEmit"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
import { ref } from "vue";
export default {
  components: {
    Child,
  },
  setup() {
    function parentEmit(val){
        // val
    }
    return{
        parentEmit
    }
  },
};
</script> 

相关文章

  • vue3使用emit传参

    1. 父子传值

  • 抛出自定义事件

    vue3使用emit分发事件,类似于$emit,从setup的第二个参数中解构出emit

  • Vue传值

    1,路由传参 2,组件传参 props父级传给子级 ,$emit子级传给父级

  • 面试题.sync修饰符

    vue规则:组件不能修改props拿外部数据this.$emit可以触发事件,并传参$event可以获取$emit...

  • vue3 组件传值

    一、父传子接通过 props接受,在vue3里props是响应式的 二、子传父接通过emit,由于vue3中的se...

  • Vue3 emit使用

    父组件: ①定义函数②使用子组件时使用该函数 子组件: ①子组件引入defineEmits②赋值给emit③触发

  • vue组件通信

    vue的组件传参的方式父子组件传参1.prop和emit是子传父,子组件监听一个事件,父组件调用并接受子组件传递过...

  • vue 组件间传值:父传子 / 子传父 / 子传子 / 祖传孙

    父传子(使用props) 子传父(使用$emit) 子传子(组件传组件,使用$on) 祖传孙(attrs 与 li...

  • 31.vue传参

    1.vue传参 vue传参使用路由传参params,query,或者使用vuex,localStorage,vue...

  • 16、Vue3 declare it using the "e

    Vue3中 子组件通过emit抛出事件 出现如下警告但不影响使用:Extraneous non-emits eve...

网友评论

    本文标题:vue3使用emit传参

    本文链接:https://www.haomeiwen.com/subject/zfrvdltx.html