vue 子组件给父组件传值

最新推荐文章于 2023-08-21 00:15:01 发布

原创最新推荐文章于 2023-08-21 00:15:01 发布 · 696 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

14 篇文章

订阅专栏

这篇博客展示了如何在Vue.js中实现子组件向父组件通信的示例。子组件通过`v-model`和`@keyup.enter.native`监听键盘回车事件，将输入的内容传递给父组件。父组件通过`@send`监听子组件触发的事件，接收到数据后在控制台打印。这体现了Vue组件间的数据流动和事件处理机制。

部署运行你感兴趣的模型镜像

子组件：

<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 >

您可能感兴趣的与本文相关的镜像