Vue页面传参

最新推荐文章于 2025-07-30 16:36:32 发布

wlop98

最新推荐文章于 2025-07-30 16:36:32 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/while_BLUE_/article/details/131809622

父子组件

子传父

子组件
通过在方法中使用this.$emit()传出

<template>
  <div>
    <h1>children</h1>
      <button @click="sendTOParent">向父组件传值</button>
  </div>
</template>>
<script>
export default {
  data() {
    return {
      data: "子组件中的信息"
    };
  },
  methods:{
        sendTOParent(){
            this.$emit('listenToChildEvent',this.data)
        }
    }
};
</script>>

父组件
通过v-on接受组件参数

<template>
  <div>
    <children v-on:listenToChildEvent = 'showMsgfromChild' />
  </div>
</template>>
<script>
import Children from "./Children";
export default {
  data() {
    return {
    };
  },
   methods:{
        showMsgfromChild(data){
            console.log(data)
        }
    },
   components: {
    Children
  },
};
</script>