Vue2.0 子组件传值父组件

本文主要介绍Vue子组件像父组件传值

一、通过事件触发子组件，将参数传递给父组件
1.子组件页面DOM部分
Header.vue

<div class="detail-close" @click="hideDetail">
        <i class="icon-close"></i>
</div>

注：重点是@click=‘hideDetail’，其他都是样式而已
2.子组件页面JS部分

methods: {
      hideDetail() {
        this.detailShow = false;
        this.$emit('hide',this.detailShow)
      }
    }

注：重点是this.$emit(hide,this.detailShow)，此处的hide为父组件需要接收的响应方法，可自定义，this.detailShow为数据可为字符串等形式，如需传多个参数，可以用逗号隔开，如:

this.$emit(hide,a,b,c)

3.父组件页面DOM部分
Vue.vue

<v-header @hide="hide"></v-header>

注：重点是是@hide响应的是子组件this.$emit(hide,this.detailShow)内的hide。@hide=”hide”末尾的hide为自定义方法。
4.父组件页面JS部分
先引入子组件
放在你的components目录下再创建一个Header目录 然后创建Header.vue(根据实际需要情况更换子组件名和引用路径)

import vHeader from '@/components/Header/Header'
export default {
    name: 'App',
    components:{
      vHeader
    },
    methods: {
        hide(data){
          console.log(data)//如此便获取子组件传递过来的数据，此处为this.detailShow
        }
    }
 }