父传子:用prop;
子传父:1,用ref ; 2 用eventBus 监听事件与触发事件;
vue父子组件传值加例子
父组件:
<template><div> <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic"> <el-form-item prop="email" label="邮箱" :rules="[{required: true,message:‘请输入邮箱地址‘, trigger:‘blur‘ },{type:‘email‘,message:‘请输入正确的邮箱地址‘,trigger:‘blur,change‘}]"> <el-input v-model="dynamicValidateForm.email" ref="myemail"></el-input> </el-form-item> <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="‘域名‘ + index" :key="domain.key" :prop="‘domains.‘ + index + ‘.value‘" :rules="{required: true, message: ‘域名不能为空‘, trigger: ‘blur‘}"> <el-input v-model="domain.value"></el-input> <el-button @click.prevent="removeDomain(domain)">删除</el-button> </el-form-item> <span ref="myspan" class="redmy">23232</span> <el-form-item> <el-button type="primary" @click="submitForm(‘dynamicValidateForm‘)">提交</el-button> <el-button @click="addDomain">新增域名</el-button> <el-button @click="resetForm(‘dynamicValidateForm‘)">清空所有</el-button> </el-form-item> </el-form> <childone ref="childonemyyy" :toChildEmail="dynamicValidateForm" v-on:kidChange = "checkEditBills"></childone> </div> </template> <script> import childone from ‘./childone‘ export default { components:{childone}, data() { return { dynamicValidateForm: { domains: [{ value: ‘‘ }], email: ‘‘, spanval:‘‘ } }; }, methods: { checkEditBills(val){ console.log("val:"+val); //val:woshi1zizujian1 this.dynamicValidateForm.domains.push({ value: ‘‘, key: Date.now() }); }, submitForm(formName) { this.$refs["childonemyyy"].isAdd;//"mychildone"用在父组件上引用子组件值,返回子组件上的data数据 this.$refs["myspan"].className; //redmy 用在元素上,返回元素节点对象 this.$refs[formName].validate((valid) => { if (valid) { alert(‘submit!‘+this.$refs[formName].email); } else { console.log(‘error submit!!‘); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); }, removeDomain(item) { var index = this.dynamicValidateForm.domains.indexOf(item) if (index !== -1) { this.dynamicValidateForm.domains.splice(index, 1) } }, addDomain() { this.dynamicValidateForm.domains.push({ value: ‘‘, key: Date.now() }); } } } </script>
子组件:
<template><div> <p ref="zzzchildone" class="ppp">我是p段落,我是子组件一</p> <el-button @click.native="submit">清空邮箱</el-button> <el-button @click.native="add">新增域名</el-button> <p>{{toChildEmail.email}}</p> </div> </template> <script type="text/javascript"> export default { props:["toChildEmail"], //父传子,toChildEmail来自父组件 // 父中这么写的:<childone ref="childonemyyy" :toChildEmail="dynamicValidateForm.email"></childone> data(){ return{ isAdd:"mychildone", } }, methods:{ submit(){ this.$refs["zzzchildone"].className //ref用在元素上,获取元素节点对象 this.toChildEmail.email=""; //子组件通过props得到了父的对象值,共享,也能改值 }, add(){ var dd="woshi1zizujian1"; // this.$emit(‘kidChange‘,event,dd); //这个会触发父组件立即执行父组件的checkEditBills()方法,且有e信息,坐标等 this.$emit(‘kidChange‘,dd); //这个会触发父组件立即执行父组件的checkEditBills()方法,把子组件的值dd传给父 } }, created(){ } } </script>
vue父子组件传值加例子