VUE父子组件之间传值

做项目时，遇到一些公用的部分，我们会把它写成公用组件，而组件之间一定要有数据交互，所以就出现了父子组件之间传值的需求。在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下的属性值

}

这样，父组件就可以拿到子组件的数据进行操作了