Prop的注意点

Prop的注意点

• MVVM设计原则是单向数据流
  所有的Prop使得父子prop之间形成了一个单项下行绑定 父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

• props只读不允许修改
  props传的值尽量不要改地址
  每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
  如果用prop传递一个初始值，这个知足件接下来希望将其作为一个本地的prop数据来使用
  这种情况下可以在本地的也就是子组件的data里面定义一个property，将prop用作初始值

props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
    }
}
1
2
3
4
5
6

这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：

props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
    }
}
1
2
3
4
5
6

复杂数据类型不可修改地址但是可以修改内容，例如对象中的属性值可以改（虽然不建议）

• prop的类型

字符串数组：

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
1

对象：

props: {
title: String,
likes: Number,  
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}
1
2
3
4
5
6
7
8
9

• prop传值
  静态传值：

<view title="Mytitle" ></view>
1

动态传值（利用v-bind）：

<view v-bind:title="Mytitle" ></view>
1

任何类型的值都可以传给一个prop