组件可以使用props给组件传值,可以同时传递多个,可以是任意类型,比如字符串或者对象。
下面是个简单的例子:
```
//向子组件传值
Vue.component('blog-post', {
props: ['test', "content"],
template: '
{{ test }}:{{content}}
'})
var vm = new Vue({
el: '#components-demo'
});
```
效果如下:
![](https://img.tnblog.net/arcimg/aojiancc2/fd6a2c1c7f034d5f9743ea60f05c4ea3.png)
----
在贴一个传多个props简单的例子,可以自己运行看看效果:
```
v-for="post in posts"
v-bind:mykey="post.id"
v-bind:title="post.title">
//向子组件传值
Vue.component('blog-post', {
props: ['mykey', "title"],
template: '
{{ mykey }}:{{title}}
'});
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
```
---
但是如果一个组件内部需要的参数很多,不可能去定义那么多的props参数,还要用那么多的v-bind去给props钟的参数赋值,这个时候就可以只给一个props参数,给一个对象,然后只需要给一个参数使用v-bind赋值即可。
```
//向子组件传值
Vue.component('blog-post', {
props: ['article'],
template: '
{{article.title}}
});
new Vue({
el: '#blog-post-demo',
data: {
myArticles: [
{ content: "只要你敢,我会毫不犹豫地跟你走,不顾一切,带着一腔勇敢和爱,跟你走。可是啊,你还是不敢", title: '文章一', autor: "aa" },
{ content: "还是很喜欢你,性情善良,待人真诚,像日光洒满天地,温柔惬意", title: '文章二', autor: "xx" },
{ content: "想把每天发生的事都分享给你的人大概是真的真的很喜欢你吧", title: '文章三', autor: "jj" }
]
}
});
```
注意几点
- props: ['article'] 也要设置一个参数,虽然可以是对象。但是也要提供
- 使用v-bind提供参数,比如这里的v-bind:article。 如果不提供参数模块里边是拿不到的
- 外面使用组件的时候提供值的名称和组件里边的无关,可以随便取,比如这里组件里边定义的props属性名叫article,但是外面我使用的是data使用的是myArticles
效果如下:
![](https://img.tnblog.net/arcimg/aojiancc2/25afdd197dec4c39ae4f5cf2fd37c93f.png)