vue父子组件传值

写一篇父子组件之间的传值来记录下，怕以后会忘记
template中

在这里插入代码片

methods中,这是跳转到另一个子页面去，括号内的是参数，name是要跳的页面的路由path,父子组件需要放在一个文件夹下哦，如果不在的话，就要在子组件页面引入父组件，params是传参的名字

methods{
	goDesign (item, status) {
      this.$router.push({ name: 'processDdesign2', params: { type: status, data: item || '', companyId: this.companyId } })
  },
}

这是第一种，直接跳转到子页面的只需要$router.push()到指定的页面就好了
然后子组件接收参数即可
子组件页面的。。。
mounted 中

mounted () {
   // 获取从上个页面带过来的参数
   this.companyId = this.$route.params.companyId
},

比如我在子组件进行操作了

methods {
	addWorkFlow (bpmn) {
	     let that = this;
	     that.$refs['workFlow'].validate(valid => {
	         if (valid) {
	             that.axios.post('xx/xx/', {
	                 companyId: that.companyId
	             }).then(res => {
	                 if (res.code === '0') {
	                     that.$message.success('添加成功');
	                     that.$router.push({name: 'processManagement', params: { operate: 'success'}})
	                 }
	             })
	         }
	     })
	 },
}

在操作成功之后呢，我又要跳到父组件中去更新下父组件的查询接口啊，因为我往里面加了、删除了，修改了数据，我要更新下啊that.$router.push({name: ‘processManagement’, params: { operate: ‘success’}})跳到这个页面去，更给了一个状态值
那么在父组件中接收

// 操作成功刷新列表
 activated() {
     if (this.$route.params.operate && this.$route.params.operate === 'success') {
         this.doSearch();
     }
 },
 methods {
 	this.doSearch();
 }

第二种就不是跳转的啦。。。。就是直接在父组件上面添加子组件代码

template中

<processDdesign3
    class="itemProcess"
    v-if="childProcessShow" // 控制什么时候被看到，其实子组件一直在父组件上面，只是先被隐藏掉，后面才能看到的
    :type="itemOperate" // 传什么参数过去 type，子组件接收名，itemOperate是data中的
    :data="itemData"
    @childPro="childProcessThen" // 把父组件哪个方法传过去，childPro，子组件接收名，childProcessThen父组件中某个方法，等会子组件操作成功后会刷新父组件的
></processDdesign3>
引入的子组件名字就叫processDdesign3，所以直接写这个名字就好了
2.还有一种
<div is="processDdesign3" v-if="childProcessShow" :type="itemOperate" data="itemData"  @childPro="childProcessThen></div>
这把子组件写在一个div里面，is放的就是子组件名字，规范一点
``
父组件script中
要引入子组件
```javascript
<script>
import processDdesign3 from './processDdesign3.vue'
export default {
	name: 'workFlow', // 父组件页面名字，路由里的path
    components: {
        processDdesign3: processDdesign3 把子组件挂在父组件上，第一个processDdesign3是上面子组件的名称，第二个processDdesign3是important引入的子组件，如果两个是一样的可以省略一个
        比如： processDdesign3就写一个就行
        如果有多个子组件的情况下用逗号隔开，
        比如：
        processDdesign2, //这是另一个子组件的
        processDdesign3
    },
}
</script>

父组件任务已经完成了，子组件只负责接收数据就好了
子组件里

<script>
	export default {
		props: {
	        type: {
	            type: String,
	            default: ''
	        },
	        data: {
	            type: Object,
	            default: () => {}
	        },
	        companyId: {
	            type: String,
	            default: ''
	        }
	    }, // 方法不用写上去，这是接收参数的地方，这里接收到的参数无需在data中再定义了，否则就重复啦
	    data () {
			// 空的啦
		}
	}
</script>

子组件接收父组件传过来的参数有两种方法
第一种是props是对象形式，就是上面两种，还有一种是数组形式

1.对象形式，需要申明每个参数是某种类型
props: {
    type: {
        type: String,
        default: ''  
    },// 字符串表示方法
    data: {
        type: Object,
        default: () => {}
    },
    data: Object, // data对象也可以这么表示，与上面这个data是一样的
    companyId: {
        type: String,
        default: ''
    }
},
2.数组的形式，无需声明参数是什么类型的,用逗号隔开
props: [type, data, companyId],          即可

在子组件里面做了操作啦，我就要刷新父组件啦

close (str, process) {
  // childPro父组件接收名字， 后面的就是这个父组件方法接收的参数  'close', ''
  this.$emit('childPro', 'close', '');
},

完成

下面来个完整例子

父组件中

template中

<template>
	<div>
		<el-button icon="el-icon-plus" type="primary" size="small" @click="openEditWindow()">新增</el-button>
		// 点击新增按钮时弹出一个弹出框
		<div is="alertdriverMaintenance" :showFlag="showFlag" :Params="Params" @doSearch="doSearch"></div>
	</div>
</template>

script中

<script>
	import alertdriverMaintenance from './alertdriverMaintenance'
	export default {
		name: 'driverMaintenance',  // 父组件名称
  		components: {alertdriverMaintenance}, // 挂载子组件
  		data () {
  			showFlag: false, // 控制子组件显示与隐藏的
  			Params: {}, // 传的参数
  		},
  		methods {
  			openEditWindow: function (row) {
		      this.showFlag = !this.showFlag
		      this.Params = row || null
		    },
		    doSearch (val) {
		    	// 获取父组件数据的
		    }
  		}
	}
</script>

子组件中

template中

<template>
	<div>
		<el-dialog
	      :visible.sync="dialogVisible"
	      :close-on-click-modal="false"
	      width="1050px">
	      <div slot="title" class="dialog-footer">
	        <i class="el-icon-edit-outline"></i>
	        <span>{{formTypeDsc}}</span>
	      </div>
	      <div>
	        <el-form ref="form" label-width="100px" size="mini" :rules="form" :model="formData">
	          <el-col :span="8" class="tb-row">
	            <el-form-item label="姓名" prop="driverCode">
	              <el-select v-model="formData.driverCode" :disabled="disabled" style="width:100%;" filterable clearable @change="carChange">
	                <el-option
	                  v-for="item in carnoList"
	                  :key="item.userCode"
	                  :label="item.userName + '-' + item.userCode"
	                  :value="item.userCode">
	                </el-option>
	              </el-select>
	            </el-form-item>
	          </el-col>
	        </el-form>
	      </div>
	      <span slot="footer" class="dialog-footer">
	        <el-button size="medium" @click="dialogVisible = false">取消</el-button>
	        <el-button type="primary" size="medium" @click="addNew" :loading="loadingBtn">确定</el-button>
	      </span>
	    </el-dialog>
	</div>
</template>

script中

<script>
	export default {
		props: ['showFlag', 'Params'],
		data () {},
		watch: {
	      showFlag (arg) {
	      	let _this = this;
	        _this.dialogVisible = true;
	        if (_this.Params !== null) {
	          // 如果_this.Params不为空有内容证明我点击了按钮，打开了子组件弹框，这时我就在这里面进行打开子组件弹框的操作，就是这个弹框打开了我要干什么啊
	        } else {
	          // 这里就是弹框关闭的时候我要干什么啊
	        }
	      }
	    },
		methods: {
			setData () {
			    // 刷新父组件
				this.$emit('doSearch', 'close');
			}
		}
	}
</script>

这个弹框下面的就是父组件，这个小弹框就是子组件，每当这个弹框出现的时候就证明子组件被调用了
完事咯