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传参

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