Vue2---父子组件之间的访问
阅读目录
Vue2--父子组件的访问
父组件访问子组件，子组件访问父组件，或者子组件访问根组件，Vue.js 都提供了相对应的API。
1. 父组件访问子组件，使用 $children 或 $refs
2. 子组件访问父组件；使用 $parent
如下代码定义了 父组件<parent-component>，父组件模板定义了2个子组件；在父组件中，通过 this.$children 可以访问子组件。
this.$children 是一个数组，它包含所有子组件的实列；如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<parent-component></parent-component>
</div>
<template id="child-component1">
<p>{{ msg }}</p>
</template>
<template id="child-component2">
<p>{{ msg }}</p>
</template>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
Vue.component('parent-component', {
template: '<div><child-component1></child-component1><child-component2></child-component2><button @click="showmsg">显示子组件的数据</button></div>',
components: {
'child-component1': {
template: '#child-component1',
data: function() {
return {
msg: '这是子组件1'
}
}
},
'child-component2': {
template: '#child-component2',
data: function() {
return {
msg: '这是子组件2'
}
}
}
},
methods: {
showmsg: function() {
for (var i = 0; i < this.$children.length; i++) {
alert(this.$children[i].msg);
}
}
}
});
new Vue({
el: '#app'
})
</script>
</html>
理解$refs
在子组件上使用 ref指令，可以给子组件指定一个索引ID，如下代码：
<child-component1 ref="A1"></child-component1><child-component2 ref="A2"></child-component2>
在父组件中，则通过$refs.索引ID访问子组件的实例：
showmsg: function() {
alert(this.$refs.A1.msg);
alert(this.$refs.A2.msg);
}
所有的代码如下：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<parent-component></parent-component>
</div>
<template id="child-component1">
<p>{{ msg }}</p>
</template>
<template id="child-component2">
<p>{{ msg }}</p>
</template>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
Vue.component('parent-component', {
template: '<div><child-component1 ref="A1"></child-component1><child-component2 ref="A2"></child-component2><button @click="showmsg">显示子组件的数据</button></div>',
components: {
'child-component1': {
template: '#child-component1',
data: function() {
return {
msg: '这是子组件1'
}
}
},
'child-component2': {
template: '#child-component2',
data: function() {
return {
msg: '这是子组件2'
}
}
}
},
methods: {
showmsg: function() {
alert(this.$refs.A1.msg);
alert(this.$refs.A2.msg);
}
}
});
new Vue({
el: '#app'
})
</script>
</html>
理解$parent
下面有一个子组件 child-component 和一个父组件 parent-component, 在子组件中，通过 this.$parent 可以访问到父组件的实例；如下代码：
<!DOCTYPE html>
<html>
<body>
<head>
<title>演示Vue</title>
</head>
<div id='app'>
<parent-component></parent-component>
</div>
<template id="child-component">
<div>
<p>111111</p>
<button @click="showmsg">显示父组件的实例</button>
</div>
</template>
</body>
<script src="./vue.js"></script>
<script type="text/javascript">
Vue.component('parent-component', {
template: '<div><child-component></child-component></div>',
components: {
'child-component': {
template: '#child-component',
methods: {
showmsg: function() {
alert(this.$parent.msg);
}
}
}
},
data: function() {
return {
msg: 'parent component msg'
}
}
});
new Vue({
el: '#app'
})
</script>
</html>
Vue2---父子组件之间的访问的更多相关文章
- Vue2.0父子组件之间和兄弟组件之间的数据交互
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
- Vue2.0父子组件之间的双向数据绑定问题解决方案
对于vue 1.0项目代码,如果把vue换成vue 2.0,那么之后项目代码就完全奔溃不能运行,vue 2.0在父子组件数据绑定的变化(不再支持双向绑定)颠覆了1.0的约定,很遗憾. 解决方案只有两种 ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- Vue(基础四)_总结五种父子组件之间的通信方式
一.前言 这篇文章主要总结了几种通信方式: 1.方式一:使用props: [ ]和$emit() (适用于单层通信) 2.方式二:$attrs和$listeners(适用于多层) 3.方式三:中央处 ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- vue之父子组件之间的通信方式
(一)props与$emit <!-这部分是一个关于父子组件之间参数传递的例子--> <!--父组件传递参数到子组件是props,子组件传递参数到父组件是用事件触发$emit--&g ...
- 【转】vue父子组件之间的通信
vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...
- React 学习(六) ---- 父子组件之间的通信
当有多个组件需要共享状态的时候,这就需要把状态放到这些组件共有的父组件中,相应地,这些组件就变成了子组件,从而涉及到父子组件之间的通信.父组件通过props 给子组件传递数据,子组件则是通过调用父组件 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vuejs组件交互 - 01 - 父子组件之间的数据交互
父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit ...
随机推荐
- hadoop 核心概念及入门
Hadoop Hadoop背景 什么是HADOOP HADOOP是apache旗下的一套开源软件平台HADOOP提供利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分布式处理,HADOOP的核 ...
- Docker 安装 mongoDB（五）
Docker 安装 mongoDB 1.搜索docker镜像(可以看到搜索的结果,这个结果是按照一定的星级评价规则排序的) docker search mongo 2.拉取docker的mongo镜像 ...
- 学了9天java，没什么感觉，有点害怕，总结一下for循环。
for(int i=0; i<100; i++){ if(i%3==0){ continue://满足条件的跳过 } System.out.print(i); } //最后输出的数中没有满足3的 ...
- SQL Server 创建和修改数据表
一.CREATE语句(创建) 1.创建DataBase 1.CONTAINMENT SQL Server 2012 新功能 , 默认值是OFF .(太高级 书上也没有详细介绍). 2.ON ON用于两 ...
- blfs（systemv版本）学习笔记-制作一个简单的桌面系统
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 大概思路: lfs(系统)+xorg(驱动)+i3-wm(窗口+桌面)+lightdm(显示管理器+登录管理器) 链接: lfs ...
- php curl中x-www-form-urlencoded与multipart/form-data 方式 Post 提交数据详解
multipart/form-data 方式 post的curl库,模拟post提交的时候,默认的方式 multipart/form-data ,这个算是post提交的几个基础的实现方式. $post ...
- loj#2509. 「AHOI / HNOI2018」排列(思维题 set)
题意 题目链接 Sol 神仙题Orz 首先不难看出如果我们从\(a_i\)向\(i\)连一条边,我们会得到以\(0\)为根的树(因为每个点一定都有一个入度,出现环说明无解),同时在进行排列的时候需要保 ...
- mysql 之库, 表的简易操作
一. 库的操作 1.创建数据库 创建数据库: create database 库名 charset utf8; charset uft8 可选项 1.2 数据库命名规范: 可以由字母.数字.下划 ...
- 第三次web作业
em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0 ...
- 谷歌迂回入华：Waymo无人车抢先进驻上海！
谷歌迂回入华:Waymo无人车抢先进驻上海! https://mp.weixin.qq.com/s/d5Cw2uhykMJ9urb6Cs8aNw 谷歌又双叒叕要回归中国了?这已经是第不知道多少次的传言 ...