父组件向子组件传值，通过v-model,子组件通过方法，携带参数传递给父组件
- 父组件.vue
<child-com :parentMsg= "visiable" @input= 'setShow'></child-com>
import childCom from "子组件地址.vue"
data(){
return{
visiable:false
}
},
methods:{
setShow(val){
this.parentMsg = val
}
}
- 子组件.vue
<template><xx v-model='childStr'><xx></template>
props:{
value： Boolean,
},
data(){
return{
//一般父组件传递过来的数据不直接使用，我们将其赋值到新的变量上
childMsg = false,
}
},
create(){
this.childMsg = this.value
},
watch:{
value(val){
this.childMsg = val
this.$emit('input',val)//子组件向父组件传值，使用方法携带参数
}，
childStr(val){
this.$emit('input',val)
}
}
父组件向子组件传值
image.png
子组件修改从父组件接收过来的值
image.png
—————————————————————————————————————
在项目事件中总结开发经验
1.父组件和子组件
- 新增 和 编辑 是可以使用同一套组件的，编辑会比新增多一次数据初始化（第一次进入渲染数据）；
- 子组件是可以继续有子组件的；
-
新增组件如果是父组件来控制新增组件展示与隐藏的，新增组件内部处理好新增接口入参，完成一般是save接口的调用，在这个调用成功的时候，使用this.
emit("parentCreateFunc",0)告诉父组件，这个数字1,0就是告诉父组件点击了那个按钮。如果不传这个状态，父组件有其他操作，可能会取消操作，还是会执行。
- 1） 一般情况父组件是这样的
<child-create :childCreate="parentCreateFunc"></child-create>
methods:{
parentCreateFunc(val){
if(val === 0){//取消
this.cretaeVisible = false;//新增组件隐藏
//刷新列表
}else{//确认
this.cretaeVisible = false;//新增组件隐藏
//刷新列表
//一些其他操作，比如写日志
}
}
}
- 2） 子组件是这样的
methods:{
confirmCreate(){//新增按钮
//整理新增接口入参
//调用新增接口
let success = res =>{ //新增数据成功的话
this.$message.success("新增数据成功！");
this.$emit("parentCreateFunc", 1);
}
}，
cancleCreate(){//取消按钮
this.$emit("parentCreateFunc", 0);
}
}
2.子组件中又包含子组件的时候
- 还是以新增为例，当新增组件中又包含了添加文件的子组件，但是新增save接口还是要传入添加文件组件的参数。这个时候，添加文件子组件要将数据传给父组件。
