父組件向子組件傳值，通過v-model,子組件通過方法，攜帶參數(shù)傳遞給父組件

• 父組件.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{
//一般父組件傳遞過來的數(shù)據(jù)不直接使用，我們將其賦值到新的變量上
childMsg = false,
}
},
create(){
this.childMsg = this.value
},
watch:{
value(val){
  this.childMsg = val
  this.$emit('input',val)//子組件向父組件傳值，使用方法攜帶參數(shù)
}，
childStr(val){
  this.$emit('input',val)
}
}

父組件向子組件傳值

image.png

子組件修改從父組件接收過來的值

image.png

—————————————————————————————————————

在項目事件中總結(jié)開發(fā)經(jīng)驗

1.父組件和子組件

• 新增 和 編輯 是可以使用同一套組件的，編輯會比新增多一次數(shù)據(jù)初始化（第一次進入渲染數(shù)據(jù)）；
• 子組件是可以繼續(xù)有子組件的；
• 新增組件如果是父組件來控制新增組件展示與隱藏的，新增組件內(nèi)部處理好新增接口入?yún)ⅲ瓿梢话闶?strong>save接口的調(diào)用，在這個調(diào)用成功的時候，使用this.emit("parentCreateFunc",0)告訴父組件，這個數(shù)字1,0就是告訴父組件點擊了那個按鈕。如果不傳這個狀態(tài)，父組件有其他操作，可能會取消操作，還是會執(zhí)行。

• 1） 一般情況父組件是這樣的

<child-create :childCreate="parentCreateFunc"></child-create>

methods:{
  parentCreateFunc(val){
      if(val === 0){//取消
          this.cretaeVisible = false;//新增組件隱藏
          //刷新列表
      }else{//確認
        this.cretaeVisible = false;//新增組件隱藏
        //刷新列表
        //一些其他操作，比如寫日志
     }
   }
}

• 2） 子組件是這樣的

methods:{
  confirmCreate(){//新增按鈕
     //整理新增接口入?yún)?    //調(diào)用新增接口
   let success = res =>{ //新增數(shù)據(jù)成功的話
          this.$message.success("新增數(shù)據(jù)成功！");
          this.$emit("parentCreateFunc", 1);
    }
   }，
cancleCreate(){//取消按鈕
 this.$emit("parentCreateFunc", 0);
}
}

2.子組件中又包含子組件的時候

• 還是以新增為例，當新增組件中又包含了添加文件的子組件，但是新增save接口還是要傳入添加文件組件的參數(shù)。這個時候，添加文件子組件要將數(shù)據(jù)傳給父組件。