Vue页面传参

最新推荐文章于 2025-12-10 10:33:21 发布

原创最新推荐文章于 2025-12-10 10:33:21 发布 · 230 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

父子组件

子传父

子组件
通过在方法中使用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>