<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 安装并启动 ...
随机推荐
- Input type (torch.FloatTensor) and weight type (torch.cuda.FloatTensor) should be the same(解决)
问题描述 在使用pytorch训练经典的MNIST数据集时,运行时,出现了以下的问题: Input type (torch.FloatTensor) and weight type (torch.cu ...
- 架构与思维：如何应对Redis热Key？
★ Redis系列文章 Redis系列1:深刻理解高性能Redis的本质 Redis系列2:数据持久化提高可用性 Redis系列3:高可用之主从架构 Redis系列4:高可用之Sentinel(哨兵模 ...
- 使用ztncui配置私有化zerotier服务器
众所周知,Zerotier-One是一个非常好的组建虚拟局域网的工具,可以以p2p的方式穿透NAT网络进行连接.但是在使用中也仍然存在着一些瑕疵,主要就是以下两点: 因为Zerotier官方提供的中心 ...
- 【Python】【OpenCV】轮廓检测
Code: 1 import cv2 2 import numpy as np 3 4 img = np.zeros((200, 200), dtype=np.uint8) 5 img[50:150, ...
- ElasticSearch之Shard request cache settings
对于查询操作,Elasticsearch提供了缓存特性来暂存结果. 对于相同条件的查询请求,在缓存中的数据失效前,响应后续的查询操作时可以直接从缓存中提取结果,有效降低检索操作的时延,提升检索数据时的 ...
- 防火墙配置SNMP
深信服AC配置SNMP 深信服AF配置SNMP 深信服AD配置SNMP 在接口上启用是snmp管理,平台有网神的mib,可以都读到数据
- electron入门之创建新窗口remote（一）
electron入门到入土,从渲染线程中创建新窗口.2022-03-21入门版本17.1.2 electron重要概念,只有一个主线程,其他都是渲染进程或者叫子线程,他们不能直接相互操作,可以通过ip ...
- 2023-06-04：你的音乐播放器里有 N 首不同的歌， 在旅途中，你的旅伴想要听 L 首歌（不一定不同，即，允许歌曲重复， 请你为她按如下规则创建一个播放列表， 每首歌至少播放一次， 一首歌只有在
2023-06-04:你的音乐播放器里有 N 首不同的歌, 在旅途中,你的旅伴想要听 L 首歌(不一定不同,即,允许歌曲重复, 请你为她按如下规则创建一个播放列表, 每首歌至少播放一次, 一首歌只有在 ...
- NebulaGraph实战：1-NebulaGraph安装和基础操作
以前使用Neo4j图数据库,考虑到生产环境需要最终选择了NebulaGraph图数据库.对于数据要求比较高的领域,比如医疗.财务等,暂时还是离不开知识图谱的.后面主要围绕LLM+KG做一些行业解决 ...
- .NET Conf China 2023分享-.NET应用国际化-AIGC智能翻译+代码生成
今年.NET Conf China 2023技术大会,我给大家分享了 .NET应用国际化-AIGC智能翻译+代码生成的议题,今天整理成博客,分享给所有人. 随着疫情的消退,越来越多的企业开始向海外拓展 ...