vue2中的props属性传递
vue中的props对象1.props对象的定义props其实是properties的缩写,props对象是用来定义属性的。props对象可以接受数组形式的参数又或者是对象形式的参数。数组形式props: ['title', 'likes', 'isPublished', 'commentIds', 'author']对象形式在对象形式中,可以指定该属性的类型,这些 property 的名称和值分
vue2中的props属性传递
1.props对象的定义
props其实是properties的缩写,props对象是用来定义属性的。props对象可以接受数组形式的参数又或者是对象形式的参数。
数组形式
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
对象形式
在对象形式中,可以指定该属性的类型,这些 property 的名称和值分别是 prop 各自的名称和类型。
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
2.关于属性的命名方法 (驼峰命名法)
根据官方解释,HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名:
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
在HTML中使用给组件的属性赋值时就需要这样:
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
这个官方案例可以很清晰得看到postTitle------>post-title
3. props值的传递
这个很容易理解,props中对应的属性是对应HTML中的attribute变量的,所以我们可以这样传递值:
<!--这样直接赋值-->
<blog-post title="My journey with Vue"></blog-post>
<!--也可以通过v-bind绑定赋值-->
<blog-post v-bind:title="data"></blog-post>
4.组件间数据的传递
props经常用来将父组件的数据传递到子组件,这个实现十分简单,就是通过v-bind绑定属性在将父组件中的数据传递到子组件中。
下面代码或许有点乱,但没关系,我一步步解读:
- 定义了一个父组件father-node,并且data中定义一个名为count的数据。
- 定义了一个子组件child-node,在props中定义了一个count属性。
- 在父组件的模板中我们使用了子组件child-node,并通过v-bind将father-node中名为count的数据传递给了child-node的count属性。
- 然后,我们将child-node的count属性值赋给了child-node的data中的child-count数据,并进行了展示。
- 数据流长这样:父组件的data------->子组件的props--------->子组件的data
<script>
Vue.component("father-node",{
template:'<div><child-node :count="count"></child-node></div>',
//一个父组件数据count
data:function(){
return{
count:0
}
},
component:{
'child-node':{
template:'<p>来自父组件的count:{{child-count}}</p>',
props:['count'],
data:{
function{
return {
child-count:this.count
}
}
}
}
}
})
</script>
为什么这样传呢?
每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
更多推荐
所有评论(0)