通過Prop向子組件傳遞數據

如何使用

第一步父組件App.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>
 

解釋：把父組件中的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>
 

解釋：父組件中傳過來的值可以直接使用了{{users[0].name}}

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()
  }
}

Vue Prop屬性（父to子）