做项目时，遇到一些公用的部分，我们会把它写成公用组件，而组件之间一定要有数据交互，所以就出现了父子组件之间传值的需求。在VUE中，是这样传值的：
首先讲，父组件如何调用子组件
第一步：在父组件当中，引入子组件模块路径：
import loading from "@/components/loading.vue";
第二步：js调用子组件模块，在components中新增子组件
components: {
loading
}
第三步：在父组件中要调用子组件的位置，添加子组件标签
<loading ></loading >
到此，子组件引入成功
父组件给子组件传值
父组件给子组件传值，直接在引用子组件的标签中加入数据属性
<loading :setId="setId"> </ loading>
<标签名 :数据键名="数据键值"></标签名>
子组件接收值：在export default下写props对象
props: ['setId','courseId','price','tyPrice']
在子组件当中，就可以直接用this.setid来使用父组件传输的值
子组件给父组件传值
子组件给父组件传值需要再子组件中使用如下方法
this.$emit('func',this.token)
| |
//自定义事件 此处写要传的数据
如果要传输的数据不值一个，那就使用对象进行传输
var data={
a:‘...’,
b:'...'
}
this.$emit('func',data)
完成了子组件需要做的部分之后，看一下父组件中要怎么做
在父组件页面当中，调用子组件的标签内，加入自定义函数事件，这里我们用的是 ' func '，并调用当前页面函数
<loading @func=" getData " ></loading >
在函数中，
getloginInfo(data){
this.token = data;//data为子组件传过来的值，如果是单个值，就可以拿到直接用
this.token = data.a;//如果是多个数据的话，就要取data下的属性值
}
这样，父组件就可以拿到子组件的数据进行操作了
