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 ...
随机推荐
- 01-K Code
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submission ...
- 如何用 JavaScript 控制 Arduino？
Arduino 运行 C 语言,而主控端运行 JavaScript,一次要编写和维护两种程序.既然浏览器和服务器都用 JavaScript,若 Arduino 也能用 JavaScript 控制,那岂 ...
- Decimal fixed point and floating point arithmetic
decimal — Decimal fixed point and floating point arithmetic — Python 3.8.0a0 documentation https://d ...
- jQuery方法find()与children()区别
一.find() 1.1 说明 find()方法返回被选元素的后代元素,一路向下直到最后一个后代. 1.2 示例 <div> <p> <span>1</spa ...
- Ensemble learning(集成学习)
定义 集成学习是一种机器学习范式,其中多个学习器被训练来解决相同的问题. 这与试图从训练数据中学习一个假设的普通机器学习方法相反,集成方法尝试构造一组假设并将它们结合使用. 一个集合包含一些通常被称为 ...
- Oracle学习笔记—Oracle左连接、右连接、全外连接以及（+）号用法（转载）
转载自: Oracle左连接.右连接.全外连接以及(+)号用法 对于外连接,Oracle中可以使用“(+)”来表示. 关于使用(+)的一些注意事项: (+)操作符只能出现在WHERE子句中,并且不能与 ...
- Webpack，Browserify和Gulp三者之间到底是怎样的关系
转:https://zhidao.baidu.com/question/1799220342210982227.html怎么解释呢?因为 Gulp 和 browserify / webpack 不是一 ...
- (转)使用ServiceStack构建Web服务
提到构建WebService服务,大家肯定第一个想到的是使用WCF,因为简单快捷嘛.首先要说明的是,本人对WCF不太了解,但是想快速建立一个WebService,于是看到了MSDN上的这一篇文章 Bu ...
- 算法寒假实习面试经过之 滴滴（电话一面二面 offer）
一面:1h 介绍比赛项目. lr与xgb的区别? xgb 为什么不用归一化,onehot? xgb 与 gbdt的区别. 做这些比赛你们的优势在哪,既然全是相同的套路. RCNN的原理, CNN的原理 ...
- SpringBoot Redis工具类封装
1.接口类 package com.sze.redis.util; import java.util.List; import java.util.Set; import java.util.conc ...