vue学习笔记之——v-for与局部组件的传值

最新推荐文章于 2024-09-26 10:41:08 发布

蜗牛fighting

最新推荐文章于 2024-09-26 10:41:08 发布

阅读量9.7k

点赞数

本文链接：https://blog.csdn.net/liu620151/article/details/72845333

版权

本文介绍了在Vue2.0中如何使用v-for进行列表渲染，并结合自定义组件实现数据传递。通过在组件中定义props接收父组件传递的user对象，可以在每个列表项中显示用户姓名和邮箱。示例代码展示了如何创建Vue实例，定义data中的users数组以及注册并使用名为'user-profile'的局部组件。

摘要由CSDN通过智能技术生成

在vue2.0中列表渲染也是一门学问，如果你的列表用到了v-for进行数据遍历，而且每一项使用一个自定义组件包裹，像这样

其中：user就是组件元素的属性，在创建组件时只需要通过props引入其对应的数据，就可以通过组件得到相应的列表标签，完整代码如下:

<body>
<div id="app">
<user-profile v-for="user in users" :user="user"></user-profile>
</div>
<script>
new Vue({
el: '#app',
data:{
users:[
{
name:"BoBo",
email:"bobo@163.com"
},{
name:"Peter",
email:"peter@163.com"
}]
},
components: {
'user-profile': {
template:"<li>{{user.name}} {{user.email}}</li>",
props:["user"]
}
}
})
</script>
</body>