vue 父元素点击不触发子组件_vue父组件触发子组件事件

1. 父组件中获取子组件方法

$children

import vHeader from './Header';

import vContent from './Content';

import vFooter from './Footer';

export default {

components:{vHeader,vContent,vFooter},

created(){

console.log(this.$children)

//输出结果[VueComponent,VueComponent,VueComponent],此时可以通过下标获取响应组件，如获取vHeader为this.$children[0].

}

}

$refs

import vHeader from './Header';

import vContent from './Content';

import vFooter from './Footer';

export default {

components:{vHeader,vContent,vFooter},

created(){

console.log(this.$refs);

//输出结果：{header:VueComponent,content:VueComponent,footer:VueComponent},此时可以通过对象key进行获取响应组件，如vHeader组件获取为this.$refs.header

}

}

2. 子组件中定义父组件所要触发事件