本文主要介绍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
}
}
}