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 ...
随机推荐
- Censor(KMP)
Censor frog is now a editor to censor so-called sensitive words (敏感词). She has a long text pp. Her j ...
- 三、docker官网注册docker id
docker官网注册docker ID 电脑注册docker没有成功,网上有人说用手机注册,试了一下确实可以注册. 1.下载蓝灯软件开启FQ代理. 2.登录网站,按照提示注册.
- 关于js的当前日期的格式化，和两个日期之间的相减的天数
function getFormatYMD(timesamp){ var date = new Date(timesamp); Y = date.getFullYear() + '-'; M = (d ...
- undefined let 作用域
const o = {uid:123,pid:'wwww'}const wxPayNotifyUrlBizInfo = (o) => { // TODO json let s = '' for ...
- HNOI2019爆零记
HNOI2019真-爆零祭 我怎么这么菜QAQ day-37 从学科溜过来搞OI. 班主任一直在谈论我退役的事情,这就是NOIP挂分的后果...说我没考好就找理由,人家xxxxxxx可不是xxxxxx ...
- 数据库之MySQL（二）
数据表基本 1.创建表 create table 表名( 列名 类型 是否可以为空, 列名 类型 是否可以为空)ENGINE=InnoDB DEFAULT CHARSET=utf8 是 ...
- JDBC请求
做JDBC请求,首先需要两个jar包:mysql驱动-mysql-connector-java-5.1.13-bin.jar 和 sqlServer驱动-sqljdbc4.jar,将这两个jar包放到 ...
- mysql执行计划图
- LeetCode-day03
28. Best Time to Buy and Sell Stock 买卖股票的最好时间 29. Best Time to Buy and Sell Stock II 买卖股票2(多次买入,一次卖出 ...
- Educational Codeforces Round 29（6/7）
1.Quasi-palindrome 题意:问一个字符串(你可以添加前导‘0’或不添加)是否是回文串 思路:将给定的字符串的前缀‘0’和后缀‘0’都去掉,然后看其是否为回文串 #include< ...