Vueのプロップ属性（子の親）

プロップによってサブアセンブリにデータを送信します

最初のステップの親コンポーネント

<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>

説明：データの親コンポーネント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>

プロップタイプ

文字列配列の小道具の形で記載されています：

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

オブジェクトとしてリストPROP、これらの属性の名前と値は、それぞれの小道具の名前とタイプです。

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

二つ目は、推奨します

動的または静的な小道具を渡します

静的な値を渡さ支えるために：

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

例えば、動的にV-バインドによって割り当てられ支えます：

<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>

値の任意のタイプは、小道具に渡すことができます

単方向データフロー

プロップ親はなく、その逆、サブアセンブリを更新するために流下ます。
例小道具を変更するには、2つの一般的な試みがあります：
小道具は、初期値を渡すために使用され、このサブアセンブリは、次のローカルデータ小道具として使用したいと思います。この場合、特性のより良い定義とその初期値プロップなどのローカルデータに

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

渡されたプリミティブ値との小道具や変換の必要性。この場合には、プロペラ計算プロパティを定義するには、この値を使用することが好ましいです。

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