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 ...
随机推荐
- 【机器学习与R语言】13- 如何提高模型的性能？
目录 1.调整模型参数来提高性能 1.1 创建简单的调整模型 2.2 定制调整参数 2.使用元学习来提高性能 2.1 集成学习(元学习)概述 2.2 bagging 2.3 boosting 2.4 ...
- [linux] rm -rf删除软链接无权限？
一个很简单的命令,使用频率非常高,但一没注意就会失策. 我将别人盘下的list目录软连接到自己盘中,想要删除时: rm -rf list/ #输入时自然地用tab键补全 结果: 试了多次也删除不了,最 ...
- 详细解析Thinkphp5.1源码执行入口文件index.php运行过程
详细解析Thinkphp5.1源码执行入口文件index.php运行过程 运行了public目录下的index.php文件后,tp的运行整个运行过程的解析 入口文件index.php代码如下: < ...
- Python基础之流程控制for循环
目录 1. 语法 2. for+break 3. for+continue 4. for循环嵌套 1. 语法 while循环可以对任何内容循环,但循环次数不可控 for循环基于容器类型的长度,循环次数 ...
- 工作学习1-tcp自连接
运维同事反馈服务起不来.下面为了方便,写了一个demo来展示. https://gitee.com/northeast_coder/code/tree/master/case/case1_tcp_se ...
- C语言中的重要位运算
1. 常用的等式 :-n = ~(n-1) = ~n + 1. 2. 获取整数n的人进制形式中的最后1个,也就是只保留最后一个1,其余的全部置位0,如1000 0011 ---> 0000 0 ...
- 爬虫系列：连接网站与解析 HTML
这篇文章是爬虫系列第三期,讲解使用 Python 连接到网站,并使用 BeautifulSoup 解析 HTML 页面. 在 Python 中我们使用 requests 库来访问目标网站,使用 Bea ...
- STM32代码常见的坑
1 混淆换行符\和除号/造成的坑 入坑代码: GPIO_InitStructure.GPIO_Pin = GPIO_Pin_0 | GPIO_Pin_1 | GPIO_Pin_2 | GPIO_Pin ...
- Tomcat中的Server.xml配置详解
Tomcat中的Server.xml配置详解 Tomcat Server的结构图如下: 该文件描述了如何启动Tomcat Server <Server> <Listener /> ...
- 【Java】【IDE】【Jetbrain Idea】Intellij IDEA 快捷键整理
[常规] Ctrl+Shift + Enter,语句完成 "!",否定完成,输入表达式时按 "!"键 Ctrl+E,最近的文件 Ctrl+Shift+E,最近更 ...