通过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>
子组件中
<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>
Prop类型
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}
传递动态或静态prop
<blog-post title="My journey with Vue"></blog-post>
<!-- 动态赋予一个变量的值 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 动态赋予一个复杂表达式的值 -->
<blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>
单向数据流
props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
}
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}