<vue 组件 2、组件参数传递>
代码结构
一、 01-父组件向子组件传递数据
1、 效果
展示出来的数据都是父组件传给子组件的数据
2、代码
01-父组件向子组件传递数据.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<cpn :cmessage="message" :cbooks="books"></cpn>
</div> <template id="cpn">
<div>
<ul>
<li v-for="item in cbooks">{{item}}</li>
</ul>
<h2>{{cmessage}}</h2>
</div>
</template> <script src="vue.js"></script>
<script>
// 父传子: props
let cpn = {
template: '#cpn',
//简单写法
// props: ['cbooks', 'cmessage'],
props: {
// 1.类型限制
// cbooks: Array,
// cmessage: String, // 2.提供一些默认值, 以及必传值
cmessage: {
type: String,
default: 'a',
required: true
},
// 类型是对象或者数组时, 默认值必须是一个函数
cbooks: {
type: Array,
default () {
return []
}
}
},
data() {
return {}
},
methods: { }
} const app = new Vue({
el: '#app',
data: {
message: 'hello world',
books: ['三国演义', '西游记', '水浒传', '红楼梦']
},
components: {
cpn
}
})
</script> </body>
</html>
二、 02-父传子(props中的驼峰标识)
1、 效果
2、代码
02-父传子(props中的驼峰标识).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<cpn :c-info="info" :child-my-message="message" ></cpn>
</div> <template id="cpn">
<div>
<h2>{{cInfo}}</h2>
<h2>{{cInfo.name}}</h2>
<h2>{{cInfo.age}}</h2>
<h2>{{cInfo.height}}</h2>
<h2>{{childMyMessage}}</h2>
</div>
</template> <script src="vue.js"></script>
<script>
let cpn = {
template: '#cpn',
props: {
cInfo: {
type: Object,
default () {
return {}
}
},
childMyMessage: {
type: String,
default: ''
}
}
} let app = new Vue({
el: '#app',
data: {
info: {
name: 'yc',
age: 25,
height: 1.83
},
message: 'hello world'
},
components: {
cpn
}
})
</script> </body>
</html>
三、03-子传父(自定义事件)
1、效果
点击后将父组件的参数，传递给子组件并展示
2、代码
03-子传父(自定义事件).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <!--父组件模板-->
<div id="app"> <div>
父组件调用子组件
<cpn @item-click="cpnClick"></cpn>
</div> <div>
父组件展示子组件传来的参数
{{book}}
</div> </div> <!--子组件模板-->
<template id="cpn">
<div>
<ul>
<li v-for="item in books" @click="btnClick(item)"> {{item.id}}----{{item.name}}</li>
</ul>
</div>
</template> <script src="vue.js"></script>
<script>
// 1.子组件
let cpn = {
template: '#cpn',
data() {
return {
books: [{
id: 'A',
name: '子组件数据-三国演义'
},
{
id: 'B',
name: '子组件数据-西游记'
},
{
id: 'C',
name: '子组件数据-红楼梦'
},
{
id: 'D',
name: '子组件数据-水浒传'
},
]
}
},
methods: {
btnClick(item) {
// 发射事件: 自定义事件
this.$emit('item-click', item)
}
}
} // 2.父组件
let app = new Vue({
el: '#app',
data: {
message: '你好',
book: [] },
components: {
cpn
},
methods: {
cpnClick(item) {
console.log('cpnClick', item);
this.book = item
}
}
})
</script> </body>
</html>
四、04-子组件改父组件参数
1、效果
2、代码
04-子组件改父组件参数.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<div>
<h2>父组件的参数num1 ：{{num1}}</h2>
</div> <cpn :number1="num1" @zichange="change" />
</div> <template id="cpn">
<div>
<h2>子组件的参数：</h2>
<h2>props:{{number1}}</h2>
<h2>data:{{dnumber1}}</h2>
<input type="text" :value="dnumber1" @input="num1Input">
</div>
</template> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
num1: 1
},
methods: {
change(item) {
this.num1 = item
}
},
components: {
cpn: {
template: '#cpn',
props: ['number1'] ,
data() {
return {
dnumber1: this.number1
}
},
methods: {
num1Input(event) {
// 1.将input中的value赋值到dnumber中
this.dnumber1 = event.target.value;
;
// 2.为了让父组件可以修改值, 发出一个事件
this.$emit('zichange', this.dnumber1) }
}
}
}
})
</script> </body>
</html>
五、05-watch实现子组件改父组件参数
1、效果
子组件数值改变后，父组件的数据跟着改变，效果和上一个例子一样只是这里实现使用的是watch方法
2、代码
05-watch实现子组件改父组件参数.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="app">
<div>
<h2>父组件的参数num1 ：{{num1}}</h2>
</div>
<cpn :number1="num1" @zichange="change" />
</div> <template id="cpn">
<div>
<h2>子组件的参数：</h2>
<h2>props:{{number1}}</h2>
<h2>data:{{dnumber1}}</h2>
<input type="text" v-model="dnumber1">
</div>
</template> <script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
num1: 1
},
methods: {
change(value) {
this.num1 = value
}
},
components: {
cpn: {
template: '#cpn',
props: ['number1'],
data() {
return {
dnumber1: this.number1
}
},
watch: {
//这里的dnumber1不能随便写 必须和参数名称完全一致
dnumber1(newValue) {
this.dnumber1 = newValue;
this.$emit('zichange', newValue);
}
}
}
}
})
</script> </body>
</html>
<vue 组件 2、组件参数传递>的更多相关文章
- 简单物联网：外网访问内网路由器下树莓派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 安装并启动 ...
随机推荐
- Fast ORM 读写分离功能使用方式
Fast Framework 作者 Mr-zhong 代码改变世界.... 一.前言 Fast Framework 基于NET6.0 封装的轻量级 ORM 框架 支持多种数据库 SqlServer O ...
- [ABC262A] World Cup
Problem Statement A sport event is held in June of every year whose remainder when divided by $4$ is ...
- Mybatis-Flex核心功能之@Table
1.能干啥? @Table 主要是用于给 Entity 实体类添加标识,用于描述 实体类 和 数据库表 的关系,以及对实体类进行的一些 功能辅助. 例如: 数据库有一张tb_member的会员表 这时 ...
- 深度学习前沿 | 利用GAN预测股价走势
本文是对于medium上Boris博主的一篇文章的学习笔记,这篇文章中利用了生成对抗性网络(GAN)预测股票价格的变动,其中长短期记忆网络LSTM是生成器,卷积神经网络CNN是鉴别器,使用贝叶斯优化( ...
- ElasticSearch之系统关键配置
ElasticSearch之系统关键配置 集群名称 在配置文件$ES_HOME/config/elasticsearch.yml中指定,样例如下: cluster: name: logging-pro ...
- Napping - vulnhub - writeup
Napping - vulnhub - writeup 信息收集 目标开放了22和80. root@kali ~ » arp-scan -I eth1 -l Interface: eth1, type ...
- 神经网络优化篇：详解神经网络的权重初始化（Weight Initialization for Deep NetworksVanishing / Exploding gradients）
神经网络的权重初始化 这是一个神经单元初始化地例子,然后再演变到整个深度网络. 来看看只有一个神经元的情况,然后才是深度网络. 单个神经元可能有4个输入特征,从\(x_{1}\)到\(x_{4}\), ...
- 修改Ubuntu登录欢迎界面
查看登录效果 run-parts /etc/update-motd.d ubuntu 与别的linux不同,直接修改/etc/motd文件重登录后无效.因为这里/etc/motd是一个符号链接,指向/ ...
- 一文了解Vprix容器流媒体平台和传统云桌面的区别、优劣势
在当今数字化时代,随着云计算和远程办公的兴起,云桌面项目成为了提升工作效率和灵活性的重要工具.云桌面项目通过将用户的桌面环境和应用程序虚拟化,为用户提供了随时随地访问个人工作环境的便利.本文将介绍Vp ...
- 浅学GoF23种设计模式
long long ago 买了设计模式的书,一直没看,平常工作虽然涉及到,但是不够系统,工作之余抽空学习一下. 一.创建型模式 01.单例(Singleton) 02.工厂方法(Factory Me ...