vue单文件props写法_vue组件，props给一个对象参数

组件可以使用props给组件传值，可以同时传递多个，可以是任意类型，比如字符串或者对象。

下面是个简单的例子：

```

//向子组件传值

Vue.component('blog-post', {

props: ['test', "content"],

template: '

{{ test }}:{{content}}

'

})

var vm = new Vue({

el: '#components-demo'

});

```

效果如下：


----

在贴一个传多个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}}

{{article.content}}

作者：{{article.autor}}

'

});

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

效果如下：