vue子组件传值父组件（vue子组件与父组件的通信）

子组件

<template>
  <div style="background-color: #409EFF;margin-top: 100px;">
    <h1>{{ childMsg }}</h1>
    <h2>{{ childMessage }}</h2>
    <h2>{{ dataOne }}</h2>
    <h2>{{ dataTwo }}</h2>
    <h2>{{ dataThree.name }}</h2>
    <button type="button" @click="aaa()">点击这个按钮向父组件传递数据</button>
  </div>
</template>

<script>
  export default {
    name: 'oniGang',
    // props:['dataOne','dataTwo'],
    props: {
      dataOne: {
        type: String, // 规定类型
        required: true // 是否必填
      },
      dataTwo: {
        type: [String, Number], // 可以规定为多个类型，满足一个即可
      },
      dataThree: {
        type: Object,
        default: { // 父组件没有传过来这个值，所以是没有这个值的，但是可以规定一个默认值，在没有值的情况下就是默认值
          name: '大坏蛋'
        }
      }
    },
    data() {
      return {
        childMsg: 'voni-gang',
        childMessage: '这是子组件',
        postData:'我是传递去父组件的数据'
      }
    },
    methods: {
      aaa() { // 注册一个函数，点击这个函数通过$emit方法像父组件传递数据
          this.$emit('postDataForFather',this.postData)
            //父组件中子组件标签中的自定义事件名，   需要传递的数据
      }
    }
  }
</script>

<style lang="scss">

</style>

 父组件

<template>
  <div style="width: 600px;height: 600px;background-color: #000;color: #FFFFFF;">
    <h1> {{ fatherMsg }} </h1>
    <h1> {{ fatherMessage }} </h1>
    <oni-gang :dataOne='fatherData' :dataTwo='fun1()' @postDataForFather='fun2'></oni-gang>
    <!-- 子组件通过$emit('postDataForFather',this.postData)注册的事件名写在子组件标签，绑定一个函数不要加括号，不然实参就传了个空-->
  </div>
</template>

<script>
  // 映入组件可自定义名字jj
  import oniGang from '../../components/oni-gang/oni-gang.vue'
  export default {
    components: {
      oniGang
    },
    name: 'gebuki',
    data() {
      return {
        fatherMsg: 'gebuki',
        fatherMessage: '这是父组件',
        fatherData: '父组件的data',
      }
    },
    methods: {
      fun1() {
        return 'fun1的数据'
      },
      fun2(e){
        // 这边的实参就是子组件那边传递过来的数据，那个this.postData
        console.log(e)
      },
    }
  }
</script>

<style lang="scss">

</style>

结果 

 

总的来看是很简单的事情，子组件在你要执行传值这个操作的地方$emit(父组件中子组件标签自定义事件名，要传递的数据)

父组件中给这个事件绑定一个函数，这个函数的回调就是子组件中传递的数据