项目中写组件一般是在component文件夹下，注册过的组件想要全局使用则需要在main.js中引入，局部使用的话就在需要的地方引入。我是全局引入：
（一）父组件向子组件传值（子组件通过props接收父组件的值）
父组件代码：app.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<son :message="msg"></son>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg: "我是父组件的数据"
}
}
}
</script>
子组件代码：SonComponent.vue
<template>
<section>
<h1>{{title}}</h1>
<div>{{message}}</div>
</section>
</template>
<script>
export default {
name: 'SonComponent',
data () {
return {
title: '子组件页面'
}
},
props:['message']
}
</script>
效果如下：
（二）子组件→父组件通信（子组件通过$emit( eventName)来触发一个事件）
父组件代码：app.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<son-btn @connect="say"></son-btn>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return {
msg: "我是父组件的数据"
}
},
methods:{
say(arg){
console.log(`大家好，我监听到了事件connect的触发，并且接收到了参数${arg[0]}`);
}
}
}
</script>
子组件代码：SonComponent.vue
<template>
<section>
<h1>{{title}}</h1>
<button @click="send">按钮</button>
</section>
</template>
<script>
export default {
name: 'Son1Component',
data () {
return {
title: '子按钮'
}
},
methods:{
send(){
this.$emit('connect',[1,2,3]);
}
}
}
</script>
效果如下： 
（三）非父子组件的通信
除了父子组件的相互通信，非父子关系的组件该如何通信，我们可以巧妙地利用一个空的vue实例来作为一个中央事件总线。
但是在实际开发中，我们不会这么做，我们会使用专门用于状态管理的 vuex ，关于vuex后续更新。