Vue之props属性

props介绍

在vue中，组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。

“prop”是组件数据的一个字段，期望从父组件传下来。子组件需要用 props 选项 声明 props：

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

然后向它传入一个普通字符串：

<child message="hello!"></child>

结果显示hello!

props使用：

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

html：

<child my-message="hello!"></child>

输出：hello！

父子组件的数据绑定：
html:

<div>
  <input v-model="parentMsg">
  <br>
  <child :my-message="parentMsg"></child>
</div>

js:

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

注意，props传递数字时，需要使用v-bind:
如果是下面这样：

<!-- 传递了一个字符串"1" -->
<comp some-prop="1"></comp>

实际上传递了一个数字1，应该是：

<!-- 传递实际的数字 -->
<comp v-bind:some-prop="1"></comp>

单向数据流：

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。
另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。

通常有两种改变 prop 的情况：
1、prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；确切的说：定义一个局部 data 属性，并将 prop 的初始值作为局部数据的初始值。

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

2、prop 作为需要被转变的原始值传入。定义一个 computed 属性，此属性从 prop 的值计算得出。

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

注意：在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。