vue父子组件间传值

父组件向子组件传值，通过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",1)**告诉父组件，子组件新增完成。**新增组件**如果点击的是**取消**按钮的话，使用**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接口还是要传入添加文件组件的参数。这个时候，添加文件子组件要将数据传给父组件。
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容