vue组件 Prop传递数据
组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。
每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。
1、Prop静态传递数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script> </head>
<body >
<div id="app">
<!--静态传递数据-->
<my-component message="hello" name="刘二狗" age="18"></my-component>
</div>
</body> <script>
Vue.component('my-component',{
//子组件使用父组件的数据 message name age
props:['message','name','age'],
//用data选项对数据进行处理
data:function(){
return{
message1: this.message +'用data选项对数据进行处理'
}
},
//用计算属性选项对数据进行处理
computed:{
message2:function(){
return this.message + '用计算属性选项对数据进行处理'
}
},
template:'<div>' +
'<span>{{message1}}</span><br>'+
'<span>{{message2}}</span><br>'+
'<span>{{message}} {{name}}今年{{age}}了</span><br>'+
'</div>'
})
new Vue({
el:'#app'
})
</script>
</html>
输出结果：
2、Prop动态传递数据
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body >
<div id="app">
<input v-model="parentMsg"><br>
<my-component :message="parentMsg"></my-component>
</div>
</body> <script>
Vue.component('my-component',{
props:['message'],
data:function(){
return{count:this.message+'刘三狗的嫉妒了'}
},
computed:{
normalizedSize: function () {
return this.message.trim().toLowerCase()
}
},
template:'<div>' +
'<span>{{message}}---{{normalizedSize}}</span><br>'+
'<span>{{count}}</span>'+
'</div>'
}) new Vue({
el:'#app',
data:{
parentMsg:'哈哈哈'
}
})
</script>
</html>
输出结果：
3、Prop验证，我们可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue 会发出警告。在前台的控制器中可以看到警告信息。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<example :prop-d="message"></example>
</div>
</body> <script>
Vue.component('example', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组／对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
},
template:'<span>{{propD}}</span>'
}) new Vue({
el:'#app',
data:{
message:'propD验证只能传入数字类型'
}
})
</script>
</html>
控制台输出的警告信息：
vue组件 Prop传递数据的更多相关文章
- vue prop 传递数据
prop 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据.要让子组件使用父组件的数据,需要通过子组件的 props 选项 一个组件默认可以拥有任意数量的 p ...
- Vue.js 父子组件相互传递数据
父传子 : 子组件接收变量名=父组件传递的数据 如::f-cmsg="fmsg" 注意驼峰问题 子传父:@子组件关联的方法名 = 父组件接受的方法名 如:@func=" ...
- Vue - 组件 Prop
组件注册 全局注册 可在多个vue实例中使用 <div id="app"> <my-component></my-component> < ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
- vue组件-构成组件-父子组件相互传递数据
组件对于vue来说非常重要,学习学习了基础vue后,再回过头来把组件弄透! 一.概念 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B . 它们之间必然需要相互通信 ...
- Vue.js 3.x 中跨层级组件如何传递数据？
provide/inject 基本用法 在 Vue.js 中,跨层级组件如果想要传递数据,我们可以直接使用 props 来将祖先组件的数据传递给子孙组件: 注:上图来自 Vue.js 官网:Prop ...
- vue 父子组件相互传递数据
例子一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
- Vue组件注册与数据传递
父子组件创建流程 1.构建父子组件 1.1 全局注册 (1)构建注册子组件 //构建子组件child var child = Vue.extend({ template: '<div>这是 ...
- vue组件间的数据传递
父组件向子组件传递数据 在 Vue 中,可以使用 props 向子组件传递数据. App.vue HelloWorld.vue 在子组件部分: 如果需要从父组件获取 logo 的值,就需要使用 p ...
随机推荐
- 巨蟒python全栈开发django13:中间件部分
1.回顾昨日内容 2.session认证装饰器 3.django整个流程 4.中间件简单应用 5.简单统计访问次数 6.中间件其他方法 7.orm单表内容回顾
- 禁止向 HTML 页面输出未经安全过滤或未正确转义的用户数据。
https://github.com/alibaba/p3c/blob/master/阿里巴巴Java开发手册(详尽版).pdf 5. [强制]禁止向 HTML 页面输出未经安全过滤或未正确转义的用户 ...
- python函数回顾：help()
描述 help() 函数用于查看函数或模块用途的详细说明. 语法 help 语法: help([object]) 参数说明: object -- 对象: 返回值 返回对象帮助信息. 实例 以下实例展示 ...
- 超详细：CSS-float详解
Float 详解 本文摘自:http://www.cnblogs.com/yuanchenqi/articles/5615774.html 首先要知道,div是块级元素,在页面中独占一行,自上而下排列 ...
- Android系统移植与调试之------->增加一个双击物理按键打开和关闭闪光灯并将闪光灯状态同步到下拉菜单中
最近有一个客户有这样的需求: 1.在[设置]--->[无障碍]中添加一个开关按钮. 如果打开开关的话,双击某个物理按键的时候,打开闪光灯,再双击该物理按键的时候,关闭闪光灯. 如果关闭开关的话, ...
- mysql启动报错“NET HELPMSG 3534“的解决办法
原因: mysql安装步骤错误,从mysql5.7.6开始,mysql需要这样安装: mysqld --initialize-insecure或者mysqld --initialize mysqld ...
- PS批量修改照片大小
最近发现一个好玩的东西,分享一下懒人的做法 1.先打开一张图片,调出动作面板 2.新建动作,开始记录. 3.按Ctrl + Alt + I 或者选择图像菜单----图像大小,调出修改图像大小对话框. ...
- MCU与FPGA通信
1.MCU启动FPGA相应功能模块 通过译码器选择相应的功能模块,调用实现功能. 2.MCU与FPGA串口通信 SPI协议简单.可靠.易实现,速度快,推荐使用SPI.SPI为四线机制,包含MOSI.M ...
- 面试题2：实现Singleton模式(Java实现)
SIngleton(单例)设计模式 它是最简单的常用的设计模式之一,设计模式在面向对象程序设计中起着举足轻重的作用,Singleton是唯一一个能够用短短几十行代码完整实现的模式. public cl ...
- PHP/Yii2操作Cookie,常见问题以及注意事项
设置Cookie PHP setcookie("name", "Larry",time()+3600 Yii2 $cookies = Yii::$app-> ...