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 ...
随机推荐
- Codeforces 1500E - Subset Trick（线段树）
Codeforces 题目传送门 & 洛谷题目传送门 一道线段树的套路题(似乎 ycx 会做这道题?orzorz!!11) 首先考虑什么样的 \(x\) 是"不合适"的,我 ...
- Rust 指定安装目录
集群home目录被管理员限制了存储空间,rust安装要100多M,默认安装home目录下,查了一圈,没找到rust指定安装目录的办法. 这里记录下解决办法: 在想要安装的目录执行 mkdir -p c ...
- 数据库(database)介绍
0.数据定义:除了文本类型的数据,图像.音乐.声音都是数据. 数据分类:结构化数据.非结构化数据.1.数据库定义:"电子化的文件柜","数据仓库".数据库是一个 ...
- 10.Power of Two-Leetcode
Given an integer, write a function to determine if it is a power of two. class Solution { public: bo ...
- 我好像发现了一个Go的Bug？
从一次重构说起 这事儿还得从一次重构优化说起. 最近在重构一个路由功能,由于路由比较复杂,需求变化也多,于是想通过责任链模式来重构,刚好这段时间也在 Sentinel-Go 中看到相关源码. 用责任链 ...
- Spark基础：(一)初识Spark
1.Spark中的Python和Scala的Shell (1): Python的Spark Shell 也就是我们常说的PySpark Shell进入我们的Spark目录中然后输入 bin/pyspa ...
- 大数据学习day39----数据仓库02------1. log4j 2. 父子maven工程（子spring项目的创建）3.项目开发（埋点日志预处理-json数据解析、清洗过滤、数据集成实现、uid回补）
1. log4j(具体见log4j文档) log4j是一个java系统中用于输出日志信息的工具.log4j可以将日志定义成多种级别:ERROR / WARN / INFO / DEBUG ...
- 30个类手写Spring核心原理之环境准备（1）
本文节选自<Spring 5核心原理> 1 IDEA集成Lombok插件 1.1 安装插件 IntelliJ IDEA是一款非常优秀的集成开发工具,功能强大,而且插件众多.Lombok是开 ...
- 用usb线配置直流电机驱动器不能配置成功
原因可能是因为usb线的问题 换了三条usb线. 这三条都是通的,用万用表测试都是通的,但是进行电机配置的时候不行. 猜测原因可能是三条usb线的芯材质不同导致压降不同,使得通信故障.
- 【编程思想】【设计模式】【行为模式Behavioral】chain
Python版 https://github.com/faif/python-patterns/blob/master/behavioral/chain.py #!/usr/bin/env pytho ...