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

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>