vue之父组件与子组件的通信
1.背景
参数传递(多理解)
1.父传子<c-parent :messagevue="message"></c-parent>,请看下面具体的截图描述
2.子传父<c-add @eadd="madd"></c-add>,请看下面具体的截图描述 父子组件对象访问(很简单)
1.父组件访问子组件：使用$children或$refs reference(引用)
this.$children[i] 获取调子对象
this.$refs.child1ref 获取调子对象
2.子组件访问父组件：使用$parent
this.$parent 获取到父对象 总结:
1.父组件访问子组件时一般使用$refs,因为$children需要知道下标才可以;
2.建议不要直接通过$parent获取父组件的数据,更加不要去修改,因为这样耦合度高,代码维护困难;
2.父组件向子组件传递参数-props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>组件-父组件与子组件间数据传递</h2>
<pre>
1.父组件传到子组件使用:props
2.子组件传到父组件使用:$emit event
需求:
1.将vue实例中的message传到c-parent 组件中
2.c-parent 组件中的 messageParent 数据传到 c-child 组件中
注意:这里有3层关系 vue实例(爷爷)--> 父组件(父亲)--> 子组件(孙子)
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
<!--相当于将message中的数据传递到 messagevue 里,可以理解为赋值-->
<c-parent :messagevue="message"></c-parent> </div>
<!--父模板-->
<template id="parentId">
<div>我是父组件,
<br>
父模板中获取到vue实例中的数据--------------:{{messagevue}}
<!--相当于将messageParent中的数据传递到 messageparent2 里,可以理解为赋值-->
<c-child :messageparent2="messageParent"></c-child>
</div>
</template>
<!--子模板-->
<template id="childId">
<div>我是子组件
<br>
子模板中获取到父组件中的数据为--------------:{{messageparent2}}
</div>
</template>
<script>
let app = new Vue({
el: '#app',
data: {
message: '我是vue实例的消息'
},
// 1.创建主键并注册
components: {
'c-parent': {
template: '#parentId',
props: ['messagevue'],
// 组件中数据存放
data() {
return {
messageParent: '我是父组件中的消息'
}
},
components: {
'c-child': {
template: '#childId',
props: ['messageparent2'],
data() {
return {
messageChild: '我是子组件中的消息'
};
}
}
}
}
}
})
</script>
</body>
</html>
3.props的数据校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>组件-props数据校验</h2>
<pre>
用通俗的话讲就是:
父传到子时,我们可以要求传入的必须是数字、字母、默认值等
如下：
String
Number
Boolean
Array
Object
Date
Function
Symbol
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
<!--父组件给子组件赋值-->
<c-parent :message4="message"></c-parent>
<hr>
<!-- <c-parent :obj1="obj"></c-parent>--> </div>
<!--模板-->
<template id="templateId">
<div>props参数传递校验,获取到父组件的值为:{{message4}}
</div>
</template>
<script>
let app = new Vue({
el: '#app',
data: {
// message: '我是vue实例的消息'
message: 10,
obj: {name: 'vue name', age: 3}
},
// 1.创建主键并注册
components: {
'c-parent': {
template: '#templateId',
//props: ['message1']
props: {
// 只能传入数字类型,如果传入了非数字类型,也可以显示,只是打卡浏览器控制台有报错提示信息
message2: Number,
// 必须传入字符串
message3: {
typ: String,
required: true,
// 如果父组件没有赋值,将显示该值,注意赋值为null也算是赋值了的
default: '我是默认值'
},
// 自定义验证
message4: {
type: Number,
validator: function (value) {
return value > 100
}
},
// 对象
obj1: {
type: Object,
default: function () {
return {name: 'ldp', age: 18}
}
}
}
}
}
})
</script>
</body>
</html>
4.子组件向父组件传递-$emit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>组件-子组件向父组件传递</h2>
<pre>
1.子传父使用$emit
需求:简易乘法计算器,在子组件接收数据,在父组件展示结果
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
<!--将子组件的事件eadd 赋值 给父组件madd-->
<c-add @eadd="madd"></c-add>
计算结果展示:{{numb1}}X{{numb2}}={{add}}
</div>
<!--模板-->
<template id="templateId">
<div>
请输入第一个数字:<input v-model="cnumb1">
<br>
请输入第二个数字:<input v-model="cnumb2">
<br>
<button @click="cadd">结果</button>
</div>
</template>
<script>
let app = new Vue({
el: '#app',
data: {
numb1: 0,
numb2: 0
},
// 计算属性
computed: {
add() {
return this.numb1 * this.numb2
}
},
// 方法
methods: {
madd(n1, n2) {
this.numb1 = n1
this.numb2 = n2
}
},
// 组件
components: {
'c-add': {
template: '#templateId',
data() {
return {
cnumb1: 0,
cnumb2: 0
}
},
methods: {
cadd() {
// 将事件和参数传递到父组件中取
this.$emit('eadd', this.cnumb1, this.cnumb2)
}
}
}
}
})
</script>
</body>
</html>
5.父组件访问子组件-$children
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>组件-父组件访问子组件$children</h2>
<pre>
1.父组件访问子组件：使用$children或$refs reference(引用)
this.$children[i]
this.$refs.child1ref
2.子组件访问父组件：使用$parent
this.$parent
需求:
1.定义一个父组件c-parent
2.定义2个子组件c-child1 与 c-child2,并定义一个name
3.在父组件中获取所有的子组件的name 总结:
1.父组件访问子组件时一般使用$refs,因为$children需要知道下标才可以;
2.建议不要直接通过$parent获取父组件的数据,更加不要去修改,因为这样耦合度高,代码维护困难; </pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
<c-parent></c-parent>
</div>
<!--父组件模板-->
<template id="parentid">
<div>
父组件
<c-child1></c-child1>
<c-child2></c-child2>
<button @click="showNames">列出子组件名称</button>
<ul>
<li v-for="(item,index) in names">{{index+1}}-{{item}}</li>
</ul>
</div>
</template>
<!--子组件模板1-->
<template id="child1id">
<div>
子组件1
</div>
</template>
<!--子组件模板2-->
<template id="child2id">
<div>
子组件2
</div>
</template>
<script>
let app = new Vue({
el: '#app',
// 组件
components: {
'c-parent': {
template: '#parentid',
data() {
return {names: []}
},
methods: {
showNames() {
// 遍历拥有的子组件,并累加到父组件的names数组中
for (let i = 0; i < this.$children.length; i++) {
this.names.push(this.$children[i].name)
}
}
},
components: {
'c-child1': {
template: '#child1id',
data() {
return {
name: '子组件1的name'
}
}
},
'c-child2': {
template: '#child2id',
data() {
return {
name: '子组件2的name'
}
}
}
}
}
}
})
</script>
</body>
</html>
6.父组件访问子组件-$refs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>组件-父组件访问子组件$refs</h2>
<pre>
1.$refs reference(引用)
需求:
1.定义一个父组件c-parent
2.定义2个子组件c-child1 与 c-child2,并定义一个name
3.在父组件中获取c-child1的name
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
<c-parent></c-parent>
</div>
<!--父组件模板-->
<template id="parentid">
<div>
父组件
<c-child1 ref="child1ref"></c-child1>
<c-child2 ref="child2ref"></c-child2>
<button @click="showChild1Name">获取子组件c-child1的name</button>
<br>
取到的子组件name为:{{cname}}
</div>
</template>
<!--子组件模板1-->
<template id="child1id">
<div>
子组件1
</div>
</template>
<!--子组件模板2-->
<template id="child2id">
<div>
子组件2
</div>
</template>
<script>
let app = new Vue({
el: '#app',
// 组件
components: {
'c-parent': {
template: '#parentid',
data() {
return {cname: ''}
},
methods: {
showChild1Name() {
// 通过 $refs 与 <c-child1 ref="child1-ref"></c-child1> 获取指定子组件的name
this.cname = this.$refs.child1ref.name
}
},
components: {
'c-child1': {
template: '#child1id',
data() {
return {
name: '子组件1的name'
}
}
},
'c-child2': {
template: '#child2id',
data() {
return {
name: '子组件2的name'
}
}
}
}
}
}
})
</script>
</body>
</html>
7.子组件访问父组件-$parent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="../js/vue.js"></script>
</head>
<body>
<h2>组件-子组件访问父组件$parent</h2>
<pre>
1.子组件访问父组件：使用$parent
需求:
1.定义一个父组件c-parent,并定义一个name
2.定义1个子组件c-child1
3.在子组件中获取父组件的name 总结:
1.建议不要直接通过$parent获取父组件的数据,更加不要去修改,因为这样耦合度高,代码维护困难;
</pre>
<hr>
<h2>案例如下:</h2>
<div id="app">
<c-parent></c-parent>
</div>
<!--父组件模板-->
<template id="parentid">
<div>
父组件
<c-child1></c-child1>
</div>
</template>
<!--子组件模板1-->
<template id="child1id">
<div>
子组件1
<button @click="showParentName">获取父组件的name</button>
<br>
父组件的name为:{{name}}
</div>
</template>
<script>
let app = new Vue({
el: '#app',
// 组件
components: {
'c-parent': {
template: '#parentid',
data() {
return {name: '父组件的name'}
},
components: {
'c-child1': {
template: '#child1id',
data() {
return {
name: ''
}
},
methods: {
showParentName() {
this.name = this.$parent.name
}
}
}
}
}
}
})
</script>
</body>
</html>
完美!
vue之父组件与子组件的通信的更多相关文章
- vue中父级与子组件生命周期的先后顺序
1.vue的生命周期 2.views/createrCustormer.vue为父级 <template> <expressService /> </ ...
- vue 父组件传递子组件事件
在开发中,碰到一个需要从父组件传入方法,子组件点击触发,说白了就是,把方法传入给子组件调用 <el-col v-for='data in spreadFormat.icons' class=&q ...
- Vue中，父组件向子组件传值
1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...
- VUE 父组件与子组件交互
1. 概述 1.1 说明 在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用.在VUE中,组件是可复用的VUE实例,此时组件中的dat ...
- Vue父组件向子组件传递一个动态的值，子组件如何保持实时更新实时更新？
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- vue+elementUI项目，父组件向子组件传值，子组件向父组件传值，父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- Vue系列之 => 父组件向子组件传值
父组件向子组件传递数据 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta c ...
- vue 父组件给子组件传值 Vue父组件给子组件传方法 Vue父组件把整个实例传给子组件
Home.vue <template> <!-- 所有的内容要被根节点包含起来 --> <div id="home"> <v-header ...
- vue 的父组件和子组件互相获取数据和方法
父组件主动获取子组件的数据和方法 一.ref(但不能实时更新获取) 1.调用子组件的时候 定义一个ref <child ref="headerChild"></c ...
随机推荐
- ElasticSearch服务Java内存异常分析和排查解决
ElasticSearch服务Java内存异常分析和排查解决 1.ElasticSearch业务微服务日志排查java.lang.IllegalStateException: Request cann ...
- 向web服务器下载文件
web服务器向客户端发送文件 Web服务器读取一个文件的二进制数据,把这组二进制数据发送个客户端,服务器发送给客户端的HTML文档的本质也是二进制.客户端使用以下代码读文件 response = ur ...
- python重拾基础第三天
本节内容 函数基本语法及特性 参数与局部变量 返回值 嵌套函数 递归 匿名函数 函数式编程介绍 高阶函数 内置函数 1. 函数基本语法及特性 背景提要 现在老板让你写一个监控程序,监控服务器的系统状况 ...
- 【资料分享】RK3568开发板规格书（4x ARM Cortex-A55(64bit)，主频1.8GHz）
1 开发板简介 创龙科技TL3568-EVM是一款基于瑞芯微RK3568J/RK3568B2处理器设计的四核ARM Cortex-A55国产工业评估板,每核主频高达1.8GHz/2.0GHz,由核心板 ...
- 【Python】用Python把从mysql统计的结果数据转成表格形式的图片并推送到钉钉群
** python把数据转为图片 / python推送图片到钉钉群 ** 需求:通过python访问mysql数据库,统计业务相关数据.把统计的结果数据生成表格形式的图片并发送到钉钉群里. 一:Cen ...
- Spark3学习【基于Java】5. Spark-Sql联表查询JOIN
大数据场景下,联表远比微小型关系型数据库中使用的频繁.网上有句话: 传统数据库单机模式做Join的场景毕竟有限,也建议尽量减少使用Join. 然而大数据领域就完全不同,Join是标配,OLAP业务根本 ...
- springboot 访问url 报404
使用Springboot 写了一个后端服务,通过 postman 测试接口时,发现一直 404 (message: No message available) 把springboot 从启动 到 da ...
- hive、hbase、clickhouse
hive相当于贝利,是计算处理数据的鼻祖,hbase相当于梅西,继承了hive(贝利)的意志,但是因为现代足球的发展,梅西整体水平要强于贝利的远古踢法(mapreduce),然后clickhouse相 ...
- Spring定时任务和@Async注解异步调用
Spring定时任务 1.@Scheduled注解方式 使用方式 @Scheduled的使用方式十分简单,首先在项目启动类添加注解@EnableScheduled. 编写定时任务方法,方法上添加注解@ ...
- Java 核心基础之static静态代码块和静态方法
static静态代码块和静态方法 static关键字 static修饰的方法或变量,优先于对象执行,所以内存会先有static修饰的内容,后有对象的内容 可以用来修饰类的成员方法.类的成员变量,还可以 ...