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: '
{{ postTitle }}
'
})

在HTML中使用给组件的属性赋值时就需要这样：

这个官方案例可以很清晰得看到postTitle------>post-title

3. props值的传递

这个很容易理解，props中对应的属性是对应HTML中的attribute变量的，所以我们可以这样传递值：

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

为什么这样传呢？

每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。