项目总结-------父子组件传值

父子组件传值：
父组件：
第一步：引入子组件的地址：

import addCheck from './checkInMana/addcheckInDia'

第二步：在components中添加子组件名

components :{
addCheck
}

第三步：在页面中引入子组件

第四步：父组件给子组件传值：
a:在data中声明要传的值

return:{
addcheckInVisible :false,
}

B:在引入的子组件中绑定

<add-check 
:addcheckInVisible="addcheckInVisible" 
/>

子组件：利用props接收（利用props接收的数据相当于在data中定义的一样，全局可以使用。注意：在props中接收的数据不用再在data中声明，不然会报错）

props: {
addcheckInVisible: {
type: Boolean,
default: true
}
},

子组件使用：

<span>{{addcheckInVisible}}</span>

子组件接收到父组件传递的数据，可以控制子组件的状态
父：

<a @click="addcheckIn('edit',record)" >修改</a>

点击事件调用修改方法，将addcheckInVisible 的值改变为true，父组件将addcheckInVisible =true传递给子组件，子组件弹框打开
父：

addcheckIn (parm,record) {
this.addcheckInVisible = true
},

子：为真，弹框打开

:visible="addcheckInVisible"

子：想要关闭弹框时，点击弹框中的确认/取消按钮时，子组件需要将addcheckInVisible返回传给父组件，父组件通过将addcheckInVisible 的值改变成false来关闭弹框
第一步：
在点击事件绑定的方法中将addcheckInVisible 传递给父组件，
子组件通过this.$emit（‘事件名’，传给父组件的值）将事件和值传递给父组件

this.$emit('insertFinanceVisible', this.insertFinanceVisible)

handleCancel(e) {
this.$emit('addcheckInVisible', this.addcheckInVisible)
}

父组件中，通过@激活子组件传递过来的事件addcheckInVisible，并且调用父组件中的方法addcheckInVisibleHandle

<financeInsert :addcheckInVisible="addcheckInVisible" @addcheckInVisible="addcheckInVisibleHandle" />

在父组件中的addcheckInVisibleHandle方法中将addcheckInVisible的值设置为false，弹框关闭

addcheckInVisibleHandle (data) {
this.addcheckInVisible = !data
}