vue子组件向父组件传递数据详解

最新推荐文章于 2026-03-27 02:02:46 发布

原创最新推荐文章于 2026-03-27 02:02:46 发布 · 1.6k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

前端专栏收录该内容

6 篇文章

订阅专栏

文章演示了在Vue.js中如何进行父子组件之间的数据传递。首先，在父组件(app.vue)中引入并注册子组件(HelloWorld.vue)，然后在父组件的模板中渲染子组件。子组件通过$emit触发自定义事件并传递数据，而父组件通过监听这个事件来接收并处理来自子组件的数据。

1、在父组件app.vue的scripts下引入子组件HelloWorld.vue，例如

import HelloWorld from './components/HelloWorld'

2、添加到components中，

components:{
    HelloWorld
  }

3、在父组件的template下渲染子组件的内容，

 <HelloWorld />

4、子组件向父组件传递数据，代码如下，点击按钮后，调用sendMsg方法

<template>
  <button @click="sendMsg">点击传递参数</button>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    sendMsg(){
    	//第一个参数是自定义的事件名，它携带第二个参数的内容
    	//第二个参数是传递的数据
        this.$emit('receive',this.msg)
    }
  }
}
</script>

5、父组件接收数据，代码如下，在<HelloWorld @receive=“getMsg”/>中调用子组件的自定义事件receive和父组件的getMsg方法，其中getMsg（data）方法中的data是用来接收子组件携带的数据，从而实现了从子组件到父组件数据的传递

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p >{{message}}</p>
    <HelloWorld @receive="getMsg"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
export default {
  name: 'App',
  components:{
    HelloWorld
  },
  data(){
    return {
      message:''
    }
  },
  methods:{
    getMsg(data){
      this.message = data
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>