Vue- 组件与props属性的用法

在 Vue 里,一个组件实质上是一个拥有预定义选项的一个 Vue 实例:(单独测试的时候记得new Vue()渲染)

     
     
// Define a new component called todo-item
Vue.component( 'todo-item', {
template: '<li>This is a todo</li>'
})

现在你可以在另一个组件模板中写入它:

     
     
<ol>
<!-- Create an instance of the todo-item component -->
<todo-item> </todo-item>
</ol>

但是这样会为每个 todo 渲染同样的文本,这看起来并不是很酷。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义,使得它能够接受一个 prop 字段(属性):

props 把数据传给子组件!!!

“prop” 是组件数据的一个字段,期望从父作用域传下来。子组件需要显式地用 props 选项 声明 props:


     
     
Vue.component( 'todo-item', {
// The todo-item component now accepts a
// "prop", which is like a custom attribute.
// This prop is called todo.
props: [ 'todo'],
template: '<li>{{ todo.text }}</li>'
})

现在,我们可以使用 v-bind 指令将 todo 传到每一个重复的组件中:

     
     
<div id="app-7">
<ol>
<!-- Now we provide each todo-item with the todo object -->
<!-- it's representing, so that its content can be dynamic -->
<todo-item v-for="item in groceryList" v-bind:todo="item"> </todo-item>
</ol>
</div>
     
     
Vue.component( 'todo-item', {
props: [ 'todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
]
}
})
  1. Vegetables
  2. Cheese
  3. Whatever else humans are supposed to eat
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值