<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 安装并启动 ...
随机推荐
- Go：条件控制语句
在 Go 语言中,主要的条件控制语句有 if-else.switch 和 select.以下是对它们的简单介绍: 1. if 语句: if 语句用于根据条件执行不同的代码块.它的基本形式如下: if ...
- SpringBoot项目中常见组件的配置属性
本文本的属性摘录自官方Properties配置清单,并附加了国内开发常用的框架配置属性.以国内WEB开发中,所涉及的常见组件为顺序组织配置清单 1. 配置属性清单 1.1 日志配置 序号 属性名 类型 ...
- STM32外设：串行通信 USART、I2C、SPI
USART:Universal Synchronous Asynchronous Receiver Transmitter 通用同步异步接收发送器 UART:异步中断 主要功能:接收指定长度的帧 数据 ...
- 网安靶场环境_DVWA-读取文件报错File not found! Cookie中有两个security键
DVWA-文件包含漏洞-读取文件报错-ERROR: File not found! Cookie中有两个security键 1 问题复现 (1)登录DVMA后,设置DVWA Security为Low. ...
- [CF1854D] Michael and Hotel
题目描述 Michael and Brian are stuck in a hotel with $ n $ rooms, numbered from $ 1 $ to $ n $ , and nee ...
- Go 语言区块链测试：实践指南
引言 Go 语言在区块链开发中的应用日益增多,凭借其简洁的语法和强大的并发支持,成为开发区块链应用的热门选择.理解和实践 Go 语言的单元测试对于保证区块链应用的质量和稳定性至关重要. Go 单元测试 ...
- 基于LSTM的股票价格预测模型【附源码】
导语 本文介绍了LSTM的相关内容和在股票价格预测上的应用. LSTM的股票价格预测 LSTM(Long Short Term Memory)是一种 特殊的RNN类型,同其他的RNNs相比可以更加方便 ...
- Python 实现 PDF 到 Word 文档的高效转换（DOC、DOCX）
PDF(Portable Document Format)已成为一种广泛使用的电子文档格式.PDF的主要优势是跨平台,可以在不同设备上呈现一致的外观.然而,当我们需要对文件内容进行编辑或修改,直接编辑 ...
- yml与json互转、yaml转json、json转yml
yml与json互转.yaml转json.json转yml 使用jackson下的格式化模块实现 依赖: <dependency> <groupId>com.fasterxml ...
- 04 链表（上）：如何实现LRU缓存淘汰算法？
一.什么是链表? 1.和数组一样,链表也是一种线性表. 2.从内存结构来看,链表的内存结构是不连续的内存空间,是将一组零散的内存块串联起来,从而进行数据存储的数据结构. 3.链表中的每一个内存块被称为 ...