通过 Prop 向子组件传递数据

prop 是你可以在组件上注册的一些自定义特性。

当一个值传递给一个prop特性的时候,他就变成了那个

组件实例的一个属性。

为了给博文组件传递一个标题,我们可以用一个 props 选项

将其包含在该组件可接受的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>

使用条件: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' } ] } })

接口使用:<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" ></blog-post>

猜你喜欢

转载自blog.csdn.net/weixin_39093202/article/details/88948034
今日推荐