vue 子组件给父组件传值

最新推荐文章于 2024-02-27 22:32:43 发布

幼稚猿

最新推荐文章于 2024-02-27 22:32:43 发布

阅读量644

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/mysundays/article/details/121292552

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

子组件：

<template>
  <div>
    <el-input v-model="input" placeholder="请输入内容" @keyup.enter.native="sendMsg"/>
  </div>
</template>

<script >
export default {
  name: 'Child',
  data() {
    return {
      input: '子组件的msg'
    }
  },
  methods: {
    sendMsg() {
      this.$emit('send', this.input)
    }
  }
}
</script >

<style scoped >

</style >

父组件：

<template >
  <div>
    <v-child @send="getMsg"/>
  </div>
</template >

<script >
import child from './child'
export default {
  name: 'Parent',
  components: { 'v-child': child },
  data() {
    return {}
  },
  methods: {
    getMsg(data) {
      console.log(data)
    }
  }
}
</script >

<style scoped >

</style >