<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 - 成都站圆满结束！
今年的.NET Conf 2023,中国区首次有两个会场举办Local Event,成都会场已于上周六12月9日圆满结束. 本次成都会场共计100+余名.NET开发者报名参与,共计10+名志愿者参与筹 ...
- 13 HTTP传输大文件的方法
目录 如何在有限的带宽下高效快捷传输大文件? 数据压缩 分块传输 范围请求 多段数据 如何在有限的带宽下高效快捷传输大文件? 数据压缩 分块传输 范围请求 多段数据 数据压缩 思路:把大文件整体变小 ...
- Python 中如何编写类型提示
哈喽大家好,我是咸鱼 我们知道 Python 是一门具有动态特性的语言,在编写 Python 代码的时候不需要显式地指定变量的类型 这样做虽然方便,但是降低了代码的可阅读性,在后期 review 代码 ...
- 安装Office
安装Office 第一步 访问: https://otp.landian.vip/zh-cn/ 点击立即下载 选择: 第二步 打开下载好的zip,解压,启动程序 第三步 选择部署(在这里可以看到电脑已 ...
- 去年最火的 JS 开源项目「GitHub 热点速览」
近日,「Best of JS」发布了过去一年在 GitHub 上 Star 数增速最快的 JavaScript 开源项目(2023 JavaScript Rising Stars),前 10 的开源项 ...
- MySQL面试题：一条SQL语句在MySQL中执行过程全解析
一 .MySQL 基础架构分析 介绍一下下图涉及的一些组件的基本作用帮助大家理解这幅图. 连接/线程处理(连接器): 身份认证和权限相关(如连接处理.授权认证.安全等等). 查询缓存: 执行查询语句的 ...
- Linux的一些的常用命令
小杰笔记: 记录一下Linux的一些常见命令: 1:Linux关机与重启的命令: shutdown:关机 shutdown -h 30 30秒后关机 reboot 重启 sync:将数据由内存同步到硬 ...
- Mybatis 源码2——SqlSession，执行器和一级缓存
一丶 SqlSessionFactoryBuilder,SqlSessionFactory,sqlSession mybatis 获取sqlSession是通过SqlSessionFactory获取的 ...
- Java 给PPT中的表格设置分布行和分布列
在表格中可设置"分布行"或"分布列"将行高.列宽调整为协调统一的高度或宽度,是一种快速实现表格排版的方法之一.下面,通过Java后端程序代码介绍如何在PPT幻灯 ...
- 当 BACnet 遇上 IoT，你将体验到不一样的大楼
本文分享自华为云社区<当 BACnet 遇上 IoT>,作者:美码师zale . 引言 在十四五规划中,"新基建"无疑是倍受关注的重点领域.而关于"新基建&q ...