Vue 向子组件传递参数
Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候,它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题,我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中:
<div id="app">
<blog-info
v-for="info in infos"
v-bind:info="info"
></blog-info>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Vue.component('blog-info', {
props: ['info'],
template: `
<div class="blog-post">
<h3>{{ info.title }}</h3>
<div v-html="info.content"></div>
</div>
`
})
new Vue({
el: '#app',
data: {
infos: [
{ id: 1, title: 'My journey with Vue', content:'1..' },
{ id: 2, title: 'Blogging with Vue', content:'2..' },
{ id: 3, title: 'Why Vue is so fun', content:'3..' }
]
}
})