Vue从入门到实战：使用Prop向子组件传递数据
来自CloudWiki
在使用组件时，给组件元素设置属性，组件内部如何接收呢 ?
首先需要在组件内部注册一些自定义的属性，称为prop
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
之后，在使用组件时，就可以通过属性向组件传递数据：
<blog-post title="My journey with Vue"></blog-post> <blog-post title="Blogging with Vue"></blog-post> <blog-post title="Why Vue is so fun"></blog-post>
基本使用
这是一个父子组件的典型例子，演示如何向组件之中传递数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<post-list></post-list>
</div>
<script>
Vue.component('PostItem', {
// 声明props
props: ['postTitle'],
// postTitle就像data中定义的数据属性一样，
// 在该组件中可以像 "this.postTitle" 这样使用
template: '<h3>{{ postTitle }}</h3>'
});
Vue.component('PostList', {
data() {
return {
title: 'Vue.js无难事'
}
},
// 在字符串模板中可以直接使用PascalCase命名的组件名
// 和camelCase命名的prop名
template: '<div><PostItem :postTitle="title"></PostItem></div>'
});
new Vue({
el: '#app'
})
</script>
</body>
</html>
注：
- 在字符串模板中，不必必须使用kebab-case命名法（短横线分割命名），各种命名可以直接使用。
- 与普通的HTML元素的属性传值一样，要想接收动态值，需要使用v-bind指令，否则，接收的值都是静态的字符串值
传递多个数值
如果组件需要接收多个传值，那么可以定义多个prop:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<post-list></post-list>
</div>
<script>
Vue.component('PostItem', {
props: ['author','title','content'],
template: `
<div>
<h3>{{ title }}</h3>
<p> 作者：{{ author }}</p>
<p>{{ content }}</p>
</div>`
});
Vue.component('PostList', {
data() {
return {
author: '孙鑫',
title: 'Vue.js无难事',
content: '这本书不错'
}
},
template: `<div><PostItem
:author="author"
:title="title"
:content="content">
</PostItem></div>`
});
new Vue({
el: '#app'
})
</script>
</body>
</html>
通过对象传值
如果需要传入的属性较多，也可以封装一个对象来传值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<post-list></post-list>
</div>
<script>
Vue.component('PostItem', {
props: ['post'],
template: `
<div>
<h3>{{ post.title }}</h3>
<p> 作者：{{ post.author }}</p>
<p>{{ post.content }}</p>
</div>`
});
Vue.component('PostList', {
data() {
return {
post: {
author: '孙鑫',
title: 'Vue.js无难事',
content: '这本书不错'
}
}
},
template: '<div><PostItem :post="post"/></div>'
});
new Vue({
el: '#app'
})
</script>
</body>
</html>
