Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
一、父级向子级传递数据【Prop】：
● Prop：子组件在自身标签上，使用自定义的属性来接收外界（也可以是父组件）的数据，然后将数据接收到prop中。【接收父组件的数据—动态Prop，需要v-bind绑定属性，数据可以从vue实例中获取】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html暂时不支持驼峰写法</title>
</head>
<body>
<div id="app">
<!--
子组件要或者外界（例如也可以是父组件）的数据，它是需要在自身标签上，使用props中自定义的属性来接收，
若是想接收的数据来自父组件【Vue实例】------通过绑定属性（数据可以从vue实例中获取）
-->
<!--静态的prop-->
<cpn c-info="info"></cpn><br/>
<!--动态prop-->
<cpn :c-info="info"></cpn>
</div> <template id="cpn">
<div>
<h1>cpn的内容</h1>
<ul>
<li v-for="item in cInfo">{{item}}</li>
</ul>
</div>
</template>
</body> <script type="text/javascript" src="./js/vue.min.js"></script> <script>
const cpn = {
template: `#cpn`,
props:{
cInfo: {
type: Object,
default(){
return {}
}
}
},
} let app = new Vue({
el: '#app',
data: {
message:'动态绑定属性v-bind',
abc: {
id: '1',
name: '父类的info中的name',
age: '1'
},
info: {
id: '1',
name: '父类的info中的name',
age: '15'
}
},
components: {
cpn
}
});
</script>
</body>
</html>
二、子级向父级传递数据【emit】：
● 子组件通过$emit(‘自定义事件名’, 数据变量)向父组件发送消息，在子组件进行自定义的事件进行监听【监听调用的函数可以直接通过一个自定义的参数接收到数据变量】
<!-- 父组件 -->
<div id="app">
<!-- 子组件上监听到自定义的事件的同时，也监听到发送的数据num，事件指向的函数，通过自定义一个参数value可以直接拿到数据num -->
<cpn :c-info="info" @item-click="itemClick"></cpn>
</div>
<!-- 子组件的模板 -->
<template id="cpn">
<div>
<h1>子组件的模板</h1>
<button v-for="item in cInfo" @click="btnClick(item)">{{item}}</button>
</div>
</template>
</body> <script type="text/javascript" src="js/vue.min.js"></script> <script>
const cpn = {
template: `#cpn`,
data(){
return{
num: 99
}
},
props:{
cInfo: {
type: Object,
default(){
return {}
}
}
},
methods: {
btnClick(item){
console.log('子组件接收到父组件传递的数据' + item);
//$emit的第一个参数是自定义的事件名称和发送数据num
this.$emit('item-click', this.num);
}
}
} let app = new Vue({
el: '#app',
data: {
info: {
id: '1',
name: 'yile',
age: '15'
}
},
methods: {
itemClick(value){
console.log('父组件监听到子组件发出的事件和接收到子组件的数据' + value);
}
},
components: {
cpn
}
});
</script>
三、Vue父子组件存储数据的访问：
（1）父组件访问子组件data中存储的数据：使用$children或 $refs （注意：this.$children得到的是一个数组，包含所有子组件对象。）
（2）$refs的使用：
■ $refs和ref指令通常是一起使用的
■ 首先，我们通过ref给某一个子组件绑定一个特定的ID
■ 其次，通过this.$refs.ID就可以访问到该组件了
Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）的更多相关文章
- Vue兄弟组件通信
Vue兄弟组件通信之借助中央事件总线 下载链接:https://www.yinxiangit.com 其实要实现兄弟组件通信,就算是通过父子组件通信的方式也是可以达到的,如 子 ——>父——&g ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)
第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...
- vue学习记录⑤（组件通信-父与子）
今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...
- 总结Vue第二天：自定义子组件、父子组件通信、插槽
总结Vue第二天:自定义子组件.父子组件通信.插槽 一.组件: 组件目录 1.注册组件(全局组件.局部组件和小demo) 2.组件数据存放 3.父子组件通信(父级向子级传递数据.子级向父级传递数据) ...
- vue小故事之父子(上下级)通信之父传子props
vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props 或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...
- Vue基础：子组件抽取与父子组件通信
在工作中承担一部分前端工作,主要使用Vue + Element UI. 随着版本迭代,需求增加,页面往往变得更加臃肿,不易维护.学习子组件的封装和抽取,能更好适应需求. 为什么需要子组件 可复用 将重 ...
- vue子父组件通信
之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法 模板: <div v-on:cli ...
随机推荐
- Atcoder Grand Contest 020 E - Encoding Subsets（记忆化搜索+复杂度分析）
Atcoder 题面传送门 & 洛谷题面传送门 首先先考虑如果没有什么子集的限制怎样计算方案数.明显就是一个区间 \(dp\),这个恰好一年前就做过类似的题目了.我们设 \(f_{l,r}\) ...
- P7327 Dream and Discs
题目传送门. 题意简述:有 \(n\) 个数 \(a_1,a_2,\cdots a_n\),等概率选取区间 \(P_1,S_1\subseteq [1,n]\),\(P_2\subseteq P_1\ ...
- 【豆科基因组】普通豆/菜豆/四季豆Common bean (Phaseolus vulgaris L.) 基因组
目录 研究一:G19833组装,2014NG 研究二:BAT 93组装,2016 genome biology 菜豆属(Phaseolus L.)为同源二倍体作物,包含有80 多个物种,多数为野生种, ...
- 【机器学习与R语言】8- 神经网络
目录 1.理解神经网络 1)基本概念 2)激活函数 3)网络拓扑 4)训练算法 2.神经网络应用示例 1)收集数据 2)探索和准备数据 3)训练数据 4)评估模型 5)提高性能 1.理解神经网络 1) ...
- python8 标准模块和第三方模块
- MongoDB的搭建、参数
Mongodb官网:https://www.mongodb.com/ mkdir -r /data/db touch /data/log tar -zxvf mongodb-linux-x86_6 ...
- 02 eclipse中配置Web项目(含eclipse基本配置和Tomcat的配置)
eclipse搭建web项目 一.Eclipse基本配置 找到首选项: (一)配置编码 (二)配置字体 (三)配置jdk (四)配置Tomcat 二.Tomcat配置 三.切换视图,检查Tomcat ...
- TD课程通最终版本体验
功能上,新版本增加了学校教室的上课情况,有无课程可以清楚查询,如下图: 在添加课程的设置上有改进,相比于之前编辑课程后不能保存,新版本在可保存的基础上又增加了登陆教务系统的功能,学生使用更加方便快捷, ...
- 【Go语言学习笔记】包
包其实是每个大型工程都会使用的模块化工具. 将相关的代码封装成一个包,给其他项目调用,提供不同的功能. GO的设计是将一个文件夹看成一个包,虽然不一定非要用文件夹的名字,但是比较建议. 同一个文件夹下 ...
- 源码分析-Consumer
消息消费概述 消息消费以组的模式开展,一个消费组内可以包含多个消费者,每一个消费者组可订阅多个主题,消费组之间有集群模式和广播模式两种消费模式. 集群模式,主题下的同一条消息只允许被其中一个消费者消费 ...