vue2中的props属性传递

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绑定属性在将父组件中的数据传递到子组件中。

下面代码或许有点乱，但没关系，我一步步解读：

1. 定义了一个父组件father-node，并且data中定义一个名为count的数据。
2. 定义了一个子组件child-node，在props中定义了一个count属性。
3. 在父组件的模板中我们使用了子组件child-node，并通过v-bind将father-node中名为count的数据传递给了child-node的count属性。
4. 然后，我们将child-node的count属性值赋给了child-node的data中的child-count数据，并进行了展示。
5. 数据流长这样：父组件的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 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。