<vue 组件 3、父子组件相互访问>
代码结构
一、 01-组件访问-父访问子
1、 效果
点击后在父组件里展示子组件的参数
2、代码
01-组件访问-父访问子.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<cpn ref="zi"></cpn>
<div>--------------------</div>
<div>我是父组件 </div>
<button @click="btnClick">按钮</button>
<div>
{{ziName}}
</div>
</div> <template id="cpn">
<div> 子组件name: {{name}} </div> </template> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '你好',
ziName:'父组件名称的初始值'
},
methods: {
btnClick() {
//$refs => 对象类型
this.ziName = this.$refs.zi.name;
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: '我是子组件的name',
}
}
}
}
})
</script> </body>
</html>
二、 02-组件访问-子访问父
1、 效果
点击后在子组件中访问了父组件和根组件的参数
2、代码
02-组件访问-子访问父.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<h2>我是根组件</h2>
<h2>---------</h2>
<cpn></cpn>
</div> <template id="cpn">
<div>
<h2>我是父组件</h2>
<h2>---------</h2>
<ccpn></ccpn> </div>
</template> <template id="ccpn">
<div>
<h2>我是子组件</h2>
<button @click="btnClick">按钮</button>
</div>
</template> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: '我是根组件！'
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: '我是父组件的name'
}
},
components: {
ccpn: {
template: '#ccpn',
methods: {
btnClick() {
// 1.访问父组件$parent
// console.log(this.$parent);
console.log(this.$parent.name); // 2.访问根组件$root
//console.log(this.$root);
console.log(this.$root.message);
}
}
}
}
}
}
})
</script> </body>
</html>
<vue 组件 3、父子组件相互访问>的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派Flask服务器
最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...
- 利用ssh反向代理以及autossh实现从外网连接内网服务器
前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...
- 外网访问内网Docker容器
外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...
- 外网访问内网SpringBoot
外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 怎样从外网访问内网Rails
外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...
- 怎样从外网访问内网Memcached数据库
外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...
- 怎样从外网访问内网CouchDB数据库
外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...
- 怎样从外网访问内网DB2数据库
外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...
- 怎样从外网访问内网OpenLDAP数据库
外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...
随机推荐
- .NET Conf 2023 Chengdu - 成都会场即将到来！
12月9日 天府之国 不见不散 今年的.NET Conf 2023,中国区首次有两个会场举办Local Event,北京会场12月16日,成都会场12月9日.这是所有中国.NET开发者的节日,成都会场 ...
- HDU 4787 GRE Revenge
Now Coach Pang is preparing for the Graduate Record Examinations as George did in 2011. At each day, ...
- 关于C#反射概念，附带案例！
反射 C#中的反射是一种使程序在运行时能够动态地获取类型信息并调用其成员的技术.通过反射,程序可以在运行时进行类型的动态加载.创建对象.调用方法和属性,以及访问和修改字段等.反射可以使程序更加灵活,但 ...
- 新版本下如何通过外部网络访问wsl
众所周知,wsl2是windows下的linux子系统,并且采用类似于虚拟机NAT的管理方式.一般情况下,外部网络很难直接访问到wsl上的服务,除非使用端口转发.而现在,微软更新了wsl 2.0.0, ...
- 【UniApp】-uni-app-项目计算功能(苹果计算器)
前言 本文主要介绍苹果计算器项目中计算功能的实现 在前面的文章中已经实现了输入,动态计算字体大小,以及计算器的布局 本文主要介绍计算功能的实现 正文 实现/清空/改变正负/除以100 inputTex ...
- ElasticSearch之Get index API
获取指定索引的基本信息. 命令样例如下: curl -X GET "https://localhost:9200/testindex_001?pretty" --cacert $E ...
- IOS关闭锁屏状态下左滑相机
IOS 锁屏状态下,左滑就会打开相机,还不能关闭.这种功能说真的,没有啥用,还很麻烦.看了一圈教程,写的也是没写全.自己再写一个,以后换手机还用得上. 注:此方法会导致微信的扫一扫不可用 1.找到&q ...
- 【Solve】InnerClass annotations are missing corresponding EnclosingMember annotations. Such InnerClass annotations are ignored
问题: 今天Android项目在build时出现了下面的警告: InnerClass annotations are missing corresponding EnclosingMember ann ...
- 13、Flutter AspectRatio 调整子元素child的宽高比
AspectRatio的作用是根据设置调整子元素child的宽高比. childAspectRatio 是 GridView 和 AspectRatio 控件中的一个参数 AspectRati ...
- 第十部分_Shell脚本之函数
函数 1. 什么是函数? shell中允许将一组命令集合或语句形成一段可用代码,这些代码块称为shell函数 给这段代码起个名字称为函数名,后续可以直接调用该段代码的功能 2. 如何定义函数? 方法1 ...