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

最新推荐文章于 2024-07-23 14:29:05 发布

贝塔贝卡贝

最新推荐文章于 2024-07-23 14:29:05 发布

阅读量1.8k

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Kiruthika/article/details/112707497

版权

在这里插入图片描述
子组件页面----》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>