例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的

父传子:用prop;子组件能够改变父组件的值,是共享的,和父操作是一样的效果;

子传父:1,用ref ,父中通过this.$refs["***"].属性 可以得到子组件的data属性值,共享,能进行更改操作;

    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父子组件传值加例子

vue父子组件传值加例子的更多相关文章

  1. 关于Vue父子组件传值(复杂数据类型的值)的细节点

    vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean, 当父组件值被修改时,子组件能够实时的作出改变. 如果父子传值的类型是复杂数据 ...

  2. 一个故事讲懂vue父子组件传值

    作者:李佳明同学链接:https://www.jianshu.com/p/2272b6ca0f0c 一个故事讲懂vue父子组件传值 讲故事前先讲代码 父组件向子组件传值 父组件数据传递给子组件可以通过 ...

  3. Vue 父子组件传值 props

    1.Vue 的渲染周期: vue 如何实现响应式追踪. 父子组件通信有很多方式,今天单独聊下props 的方式.我们通过查找官方文档很容发现,props传值有静态和动态两种传值方式. 当然props ...

  4. vue 父子组件传值以及方法调用,平行组件之间传值以及方法调用大全

    vue项目经常需要组件间的传值以及方法调用,具体场景就不说了,都知道.基本上所有的传值都可以用vuex状态管理来实现,只要在组件内监听vuex就好. vue常用的传值方式以及方法有: 1. 父值传子( ...

  5. vue 父子组件传值,兄弟组件传值

    父子组件中的传值 父向子    v-bind props <!-- 组件使用v-bind传值 --> <router :msg="msg"></rou ...

  6. Vue父子组件传值以及父调子方法、子调父方法

    稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础.希望可以帮到你!先来个最常用的,直接上代码: 1.父传值给子组件 父组件: <template> <div> & ...

  7. VUE父子组件传值问题

    一.父组件向子组件传递数据 组件实例的作用域是孤立的.这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,我们需要通过子组件的props选项. 1.静态props ...

  8. vue父子组件传值

    1.父组件向子组件传值 例如app.vue是父组件,v-header.vue是子组件,实现app向v-header传值父组件需要自定义自己的title值, 子组件v-header内容 <temp ...

  9. Vue父子组件传值之——访问根组件$root、$parent、$children和$refs

    Vue组件传值除了prop和$emit,我们还可以直接获取组件对象: 根组件: $root // 单一对象 表示当前组件树的根 Vue 实例,即new Vue({...根组件内容}).如果当前实例没有 ...

随机推荐

  1. ThinkPHP项目笔记之RBAC(权限)基础篇

    今天,总结一下,RBAC(基于角色的访问控制),直白一点,就是权限管理.说到这,不得不“小叙”一下,我第一次 开发权限管理功能的“插曲”.第一次做这个,真的不会,我只知道“有点印象”,当时任务落到我的 ...

  2. C++ STL迭代器与索引相互转换

    0 前言 C++ STL提供了vector.list等模板容器,极大地方便了编程使用. “遍历”是对容器使用的最常用的操作. 使用迭代器来遍历是最好最高效的遍历方法. 当然,对于有些容器的遍历除了使用 ...

  3. 快学scala习题解答--第五章 类

    5 类  5.1 改进5.1节的Counter类,让它不要在Int.MaxValue时变成负数 class Count{ private var value = Int.MaxValue else v ...

  4. mac java环境

    1.java运行环境jre:http://www.java.com/zh_CN/ 2.jdk:http://www.oracle.com/technetwork/java/javase/downloa ...

  5. angular4 在页面跳转的时候传递多个参数到新页面

    页面跳转 router.navigate //单一参数: this.router.navigate(['/detail',id]); //多个参数: this.router.navigate(['/d ...

  6. SignalR 循序渐进(四) Hub的生命周期以及IoC

    有阵子没更新这个系列了,最近太忙了.本篇带来的是Hub的生命周期以及IoC. 首先,Hub的生命周期,我们用一个Demo来看看: public class TestHub : Hub { public ...

  7. 随笔 javascript-抽象工厂模式

    随笔   javascript-抽象工厂模式 抽象工厂模式笔记   1.抽象工厂模式创建多个抽象类,创建出的结果是一个类簇(这里是抽象类的集合)   2.抽象工厂中传入的父类是否是抽象工厂方法创建的抽 ...

  8. QT in VS 多语言实现(中英文切换,每个步骤都有截图,只有UTF8才能让Qt语言家正确读取。先qApp->removeTranslator,然后installTranslator,每个类都要写上槽函数RetranslateUI)

    最近项目需要软件具有中英文双语切换功能,而QT又自带此功能,现将实现方式记录下来. 说到中英文切换,少不了要了解QT的内部编码方式.在此就不详述QT编码方式了,具体可参考 彻底弄懂Qt的编码.只需要记 ...

  9. 悼念512汶川大地震遇难同胞——珍惜现在,感恩生活--hdu2191(多重背包模板)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2191 标准的多重背包 题目 有N种物品和一个容量为V的背包.第i种物品最多有n[i]件可用,每件费用是 ...

  10. 转载--菜鸟Linux上使用Github

    1.安装Git:Ctrl + Alt + T使用终端:使用命令 sudo apt-get install git 2.创建GitHub帐号:登陆git主页: https://github.com/,自 ...