<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 安装并启动 ...
随机推荐
- 从根上理解elasticsearch(lucene)查询原理(2)-lucene常见查询类型原理分析
大家好,我是蓝胖子,在上一节我提到要想彻底搞懂elasticsearch 慢查询的原因,必须搞懂lucene的查询原理,所以在上一节我分析了lucene查询的整体流程,除此以外,还必须要搞懂各种查询类 ...
- LCIS最长公共上升子序列！HDU-1423
This is a problem from ZOJ 2432.To make it easyer,you just need output the length of the subsequence ...
- grpc是基于http/2协议的高性能的rpc框架
师傅领进门,修行在个人,跟着官方脚手架demo了grpc后,之后就需要扩展前后知识边界,下面总结grpc的前世今生和最佳实践. https://www.cnblogs.com/JulianHuang/ ...
- 技本功|数据安全之IDC数据容灾设计实现
近年来,数据安全问题日渐受到大家的关注,对于任何一家企业,数据无疑是最重要的资产之一.提到数据容灾,大家可能会想到备库和备份的概念,那么我们先来谈谈备库与备份的区别. 备库与备份的区别 通常来讲,备库 ...
- Python用辗转相除法计算两数的最大公约数和最小公倍数
计算最大公约数运用辗转相除法就行了 计算最小公倍数需要运用公式:最小公倍数=数字1*数字2/最大公约数 有关辗转相除法的知识请查看:辗转相除法 以下为代码: #计算最大公约数 def gys (x,y ...
- JPA复杂查询时间查询分页排序
JPA复杂查询时间查询分页排序 JPA复杂查询时间查询分页排序,工作上用到,因为项目是jpa,记录.代码囊括了:查询条件+时间范围+分页+排序 其实我也不太想用jpa,但是他也有优点,操作可以兼容多种 ...
- vuepress借助jenkins和svn实现文档自动化更新部署
前言 有个需求,需要将放在SVN的用vuepress写的文档进行自动化更新和部署,每次有人在本地将写好的md文件更新到svn时候,由jenkins实现自动打包来实现自动更新的功能. docker安装j ...
- 使用XDT提高开发效率
使用XDT提高开发效率 XDT介绍 XDT(XML Document Transformation)技术是一种用于对XML文档进行转换的技术.它通常用于在部署或配置过程中,根据不同的环境或条件自动修改 ...
- 微信小程序中业务域名的配置
需要配置业务域名,需要先将域名http转https 1,首先在该微信小程序的公众号平台中下载 业务域名的证书 2,将下载的证书放进nginx的根目录 3,在nginx中 (root为.txt的地址)
- 编写一个小而强大的 Windows 动态屏保壁纸
写在前面 两年前我做了第一个开源软件 DreamScene2 动态桌面,如今受到了很多人的喜欢,这增加了我继续做好开源软件的信心.之前的这个软件一直有人希望我加入一个设置屏保壁纸的功能,因为 Drea ...