<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 安装并启动 ...
随机推荐
- 分布式文件系统HDFS简介
HDFS实现目标: 兼容廉价的硬件设备 支持大数据集 实现流数据读写 支持简单的文件模型 强大的跨平台兼容性 自身的局限性: 不适合低延迟的数据访问 无法高效储存大量小文件 ...
- vue-admin-template快速开发框架，菜单栏不显示层级结构
问题现象 路由 页面效果 解决办法 路由添加中配置 alwaysShow: true, // 树形层级显示 页面效果
- JDK动态代理~Cglib动态代理,进行方法的增强
JDK动态代理(必须要有接口,代理类和被代理类实现相同的接口) public class UserServiceJDKProxy { public static UserService createU ...
- TypeScript开篇
1.什么是TypeScript(TS)? Typescript 为 JS 带来了类型能力,如今已被越来越多的大型前端项目选用.Typescript 的出现大大改善了开发体验,增强了代码的可维护性和稳定 ...
- SpringBoot结合ajax实现登录功能
1:ajax是什么(https://www.w3school.com.cn/ajax/ajax_intro.asp)? AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJA ...
- MongoDB 安装、配置及详细使用教程
环境:win10 下载地址 :https://pan.baidu.com/s/1a0SwRv9er3HTewzcI8nWgQ 提取码:dyyx 下载后,将该文件夹放在C盘的根目录下,然后 ...
- 20、Scaffold属性 BottomNavigationBar 自定义底部导航
BottomNavigationBar 是底部导航条,可以让我们定义底部Tab切换,bottomNavigationBar是 Scaffold组件的参数. BottomNavigationBar 常见 ...
- kylin&CDH理论基础
Kylin&CDH理论基础 一.维度与度量 维度是观察数据的角度.比如电商的销售数据,可以从时间维度来观察,进一步细化时间和地区维度来观察. 度量是被聚合的统计值,也是聚合运算的结果.知道维度 ...
- Nginx unexpected end of file 配置证书遇到问题，如何解决？
原文链接 https://bysocket.com/nginx-unexpected-end-of-file-expecting-in-key-file/ 一.Nginx unexpected end ...
- API生态的发展与机遇：从5000组数据看中国API生态与开发者现状
摘要:华为云联合多家单位发布了<中国API生态与开发者现状调研报告(2020年)>,旨在通过API生态.API开发者.使用者.API全生命周期管理等多视角展现我国API发展的现状与机遇,力 ...