我们 有两个 Vue页面：

1. father.vue
2. son.vue

son.vue 作为 子组件 是 被 引入的哪一方的
父传子
发送是直接在 组件上 进行发送的

// father.vue

<template>
	<div id="father">
		// 父组件 传递子组件 123  FonS 是 key
		<son :FonS="123">
		</son>
	</div>	
</template>

<script>
import son from '@/components/son
	export default {
        name: "father",
        components:{
        	son:son
        	}
        }
</script>

子组件（页面）
props 接收（列表格式）

// son.vue

<script>
    export default {
        name: "son",
        props: ['FonS'],
    }
</script>

此时 这个键（Fons）和 data 中的数据一样，可直接 this.Fons使用

mounted(){
	alert(this.FonS)
}

123

子传父
一般情况下 都是事件对应着的

// son.vue
// 此时的 SonF 是 父接收的 事件名 data 是事件名
this.$emit('SonF', 321)

父接收 在 父页面上的子组件 进行接收

// father.vue

<template>
	<div id="father">
		// data 作为虚拟名字 被当作方法 他的内部就携带了 321 参数 （这个名字随便起）
		<son :FonS="123" @SonF="data">
		</son>
	</div>	
</template>

<script>
import son from '@/components/son
	export default {
        name: "father",
        components:{
        	son:son
        	},
        methods:{
        	// res 就代表了值 （名字随便起 因为内部携带了参数）
        	data(res){
				alert(res)
			}
        }
      }
</script>

此时 打印出来的就是 321