vue---自定义事件组件交互

最新推荐文章于 2025-10-24 12:50:41 发布

原创最新推荐文章于 2025-10-24 12:50:41 发布 · 265 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

可以理解成数据的反向传递，上一节我们讲了从App.vue里面传入了MyComponent里面，但是没有反向传递。反向传递可以通过自定义事件来进行传递。

自定义事件可以在组件中反向传递数据，prop可以将数据从父组件传递到子组件，反向操作就可以利用自定义事件$emit实现。

1、首先打开开发者工具，在终端进行启动：npm run serve

2、在components中创建文件MyComponent.vue

3、在MyComponent.vue中写入：

<template>
    <h3>自定义事件传递数据</h3>
</template>

<script>
    export default{
        name:"MyComponent"
}
</script>

<style scoped>
<style>

4、在App.vue中输入：

<template>
    <MyComponent />
</template>

<script>
    import MyComponent from './components/MyComponent.vue'
    export default{
        name:'App',
        components:{
            MyComponent
        }
    }
</script>

在网址中输入localhost:8080，可以看到内容已经可以显示出来。

现在开始尝试把MyComponent内容传递给App：

1、先准备数据，在MyComponent.vue中输入：

<template>
    <h3>自定义事件传递数据</h3>
    //传递数据需要事件触发
    <button @click="sendClickHandle">点击传递</button>
</template>

<script>
    export default{
        name:"MyComponent"
        data(){
            return{
                message:"MyComponent中的数据"
            }
        },
        methods:{
            sendClickHandle(){
                    //参数1：字符串，理论上是随意起的名字，但是需要具有意义
                    //参数2：传递的数据
                  this.$emit("onEvent",this.message)
           }
        }
}
</script>

<style scoped>
<style>

2、在App.vue中输入：

<template>
    <MyComponent @onEvent="getDataHandle"/>
</template>

<script>
    import MyComponent from './components/MyComponent.vue'
    export default{
        name:'App',
        components:{
            MyComponent
        },
        methods:{
            getDataHandle(data){
                console.log(data);//控制台输出：MyComponent中的数据
            }
        }
    }
</script>

在MyComponent.vue当中写的onEvent是字符串，在App.vue当中当做事件来看，这种就叫自定义式事件。

因为在MyComponent.vue的methods当中写了this.$emit("onEvent",this.message)传递了this.message数据，就相当于给到这个自定义事件onEvent中,变成了onEvent当中的参数，
自定义事件叫做getDataHandle,在这里就相当于我们能拿到这个data。

让数据在页面上进行输出：

在App.vue中输入：

<template>
    <MyComponent @onEvent="getDataHandle"/>
    <p>{{message}}</p>
</template>

<script>
    import MyComponent from './components/MyComponent.vue'
    export default{
        name:'App',
        data(){
            return{
                message:""
            }
        },
        components:{
            MyComponent
        },
        methods:{
            getDataHandle(data){
                this.message=data;
            }
        }
    }
</script>