Vue Prop属性（父to子）

通过Prop向子组件传递数据

第一步父组件中

<template>

  <div id="app">

        <Users :users="users"></Users>

  </div>

</template>

<script>

import Users from './components/Users'

export default {

  name: 'App',

  data: function () {

    return {

      users: [

        {id:1, name:'Henry'},

        {id:2, name:'Tom'}

      ]

    }

  },

  components: {

    Users

  }

}

</script>

解释：把父组件中的data中的 users：[ ] 通过 v-bind:users = "users" 传递给子组件

子组件中

<template>

    <div id="app">

        <span>通过import注册局部组件</span><br>

        <span>{{users[0].name}}</span>

    </div>

</template>

<script>

export default {

    name: 'users',

    //props:['users'],

    props: {

        users: {

            type: Array,

            required: true

        }

    }

}

</script>

解释：父组件中传过来的值可以直接使用了 <span>{{users[0].name}}</span>

Prop类型

以字符串数组形式列出的 prop：

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

以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

props: {

  title: String,

  likes: Number,

  isPublished: Boolean,

  commentIds: Array,

  author: Object

}

推荐使用第二种

传递动态或静态prop

给 prop 传入一个静态的值：

    <blog-post title="My journey with Vue"></blog-post>

prop 可以通过 v-bind 动态赋值，例如：

<!-- 动态赋予一个变量的值 -->

<blog-post v-bind:title="post.title"></blog-post>

<!-- 动态赋予一个复杂表达式的值 -->

<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

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

单向数据流

父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

这里有两种常见的试图改变一个 prop 的情形：

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值

props: ['initialCounter'],

data: function () {

  return {

    counter: this.initialCounter

  }

}

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

props: ['size'],

computed: {

  normalizedSize: function () {

    return this.size.trim().toLowerCase()

  }

}