【前端】Vue中子组件向父组件传值

子组件向父组件传值

最新推荐文章于 2024-05-23 17:11:32 发布

转载最新推荐文章于 2024-05-23 17:11:32 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/vickylinj/p/10877765.html

文章标签：

#vue

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在Vue.js中实现子组件向父组件传递数据的方法，通过使用$emit触发事件并附带参数，父组件可通过监听事件接收这些参数。

子组件通过$emit方法（用来触发事件）传递参数。

子组件

<!--children.vue-->
<template>
  <div class="children">
    <button @click="emitToParent>按钮点击传值给父组件</button>
  </div>
</template>
<script>
export default {
    methods: {
        emitToParent(){
            this.$emit('child-event', '我是子组件向父组件传递的内容')
        }
    }
}
</script>

父组件

<!--parent.vue-->
<template>
  <div class="parent">
    <children @child-event='parentEvent'></children>
  </div>
</template>
import Children from 'components/children'
export default {
    components:{
        Children
    },
    methods:{
        <!--data为从子组件传递过来的数据-->
        parentEvent(data) {
            <!--打印“我是从子组件向父组件传递的的内容”-->
             console.log(data);
        }
    }
}