Vue结合Laravel场景下子组件向父组件emit触发事件的实现问题

核心修改逻辑 #

• 子组件无需通过$parent访问父组件，直接调用自身$emit方法抛出自定义事件即可，自定义事件名推荐使用kebab-case格式，避免HTML大小写不敏感导致的适配问题
• 父组件引用子组件时，需要显式绑定自定义事件的监听，关联到父组件自身的处理方法
• 额外优化：原父组件msg初始值为字符串'1'，改为数字1避免累加时出现字符串拼接问题

1. 修改父组件 dashboard.vue #

找到子组件引用的位置，添加事件监听：

<template>
    <app-layout title="Dashboard">
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard
            </h2>
        </template>

        <div class="h-screen bg-white overflow-hidden shadow-xl grid grid-cols-5">
            <!-- 新增自定义事件监听，绑定addValue方法 -->
            <click @add-value="addValue"/>
            <div>
                {{msg}}
            </div>
        </div>
    </app-layout>
</template>

<script>
    import AppLayout from '@/Layouts/AppLayout.vue'
    import click from '@/Components/click.vue'
    
    export default {
        components: {
            AppLayout,
            click,
        },
        data(){
            return{
                // 初始值改为数字，避免字符串拼接
                msg: 1
            }
        },methods:{
            addValue:function(){
                this.msg++
            }
        }
   }
</script>

2. 修改子组件 click.vue #

调整$emit的调用方式：

<template>
    <div>
        <button v-on:click="add" class="border-solid font-semibold hover:bg-blue-600 hover:text-white border-b-2 w-full py-5" id="click">Click ME 1</button>
    </div>
</template>

<script>
    export default {
    methods:{
            add:function(){
                // 去掉$parent，直接调用自身的$emit抛出事件
                this.$emit('add-value');
            }
        
        }}
</script>

内容的提问来源于stack exchange，提问作者AJITHKUMAR S