vue中父组件接收子组件传递的值

最新推荐文章于 2025-03-21 19:58:31 发布

原创最新推荐文章于 2025-03-21 19:58:31 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了Vue中如何实现子组件`EditList`通过点击事件触发`sonFn`方法，并将数据传递给父组件`List`，展示了组件间的父子通信机制。

在这里插入图片描述
子组件页面----》EditList:

<template>
  <div class="editList">
    <el-button type="primary" @click="clickMe">我是子组件</el-button>
  </div>
</template>

<script>
export default {
  name: 'EditList',
  data(){
    return {
      sonVal:'子组件的值'
    }
  },
  methods:{
    clickMe(){
      this.$emit('sonFn',this.sonVal)
    },
    sonFn(){//我是子组件中的方法
      console.log(this.sonVal)
    }
  }
}
</script>

父组件页面-----》list：

<template>
  <div class="list">
      <h3>父组件页面</h3>
       <!-- 3、使用子组件 -->
      <EditeList @sonFn="sonFnEvent($event)"/>
  </div>
</template>

<script>
// 1、引入子组件
import EditeList from '@/components/EditList'
export default {
  name: 'List',
  data(){
    return {
    }
  },
  methods:{
    // 父组建页面调用子组件方法
    sonFnEvent(data){
      console.log("子组件传递过来的值：",data)
    }
  },
  components:{
    // 2、注册子组件
    EditeList
  }
}
</script>