<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 安装并启动 ...
随机推荐
- SQL执行insert into后返回主键ID
1 select @@identity 2 select SCOPE_IDENTITY() 3 select IDENT_CURRENT('table') 注解:@@IDENTITY 返回当前会话的所 ...
- [CF1229E]Marek and Matching
This is a harder version of the problem. In this version, \(n \le 7\). Marek is working hard on crea ...
- MySQL按照日期查询
MySQL按时间查询 今天 select * from 表名 where TO_DAYS(时间字段名) = TO_DAYS(now()); 昨天 SELECT * FROM 表名 WHERE TO_D ...
- Oracle-startup和shutdown
startup不同参数作用 startup nomount 非安装启动,以这种方式启动可执行: 1.重建控制文件. 2.重建数据库读取init.ora文件. 3.启动实例,即启动SGA和后台进程,需要 ...
- minio集群部署
minio集群部署 1.说明: 安装前需要再添加一个磁盘后将磁盘挂载到/opt/minio目录,minio集群部署需要独占磁盘分区,不能使用文件夹代替. 运行分布式 MinIO 实例的服务器时间差不应 ...
- 让 sdk 包静默升级的 SAO 操作，你见过几种？
拓展阅读 让 sdk 包静默升级的 SAO 操作,你见过几种? 业务背景 有时候为业务方提供了基础的 sdk 包,为了保证稳定性,一般都是 release 包. 但是每一次升级都非常痛苦,也不可能写一 ...
- 轻量对象存储 LighthouseCOS 用户实践征文
产品使用攻略.上云技术实践,有奖征集,多重好礼等您带回家- 存储桶一键挂载轻量应用服务器,简单易用,腾讯云轻量对象存储用户实践征文活动特惠:腾讯云轻量云专场特惠活动. 投稿说明 注册/登录腾讯云账号, ...
- Kernel Memory 中使用 PaddleSharp OCR
Kernel Memory 中使用 PaddleSharp OCR Kernel Memory 中进行文档处理的时候可以上传图片作为文档,这时候就需要使用到 OCR 技术来识别图片中的文字. 官方默认 ...
- 2023年资深C#开发者的思考
2023年转眼间就这样过掉了,作为一名资深C#的开发员人员,年龄也大了1岁,从最早接触C#开始,算下来已经超过15年以上了,随着工作经验的不断增加,物价不断的飞涨以及家庭支出的不断上涨,工作1份工资已 ...
- electron入门之配置镜像加速（四）
electron入门到入土,配置阿里镜像加速.为了防止后面我们打包龟速,需要给electron配置阿里镜像加速 在下面的文件内添加阿里镜像加速,你的文件位置不一定是这个 C:\Program File ...