1.代码
<script src="https://unpkg.com/vue@next" rel="external nofollow" ></script>
<div id="todo-list-app">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
<script>
const TodoList = {
data() {
return {
groceryList: [
{ id: 0, text: 'Vegetables' },
{ id: 1, text: 'Cheese' },
{ id: 2, text: 'Whatever else humans are supposed to eat' }
]
}
}
}
// 创建一个Vue 应用
const app = Vue.createApp(TodoList)
// 定义一个名为 button-counter 的新全局组件
app.component('todo-item', {
props: ['todo'],
template: `<li>{{ todo.text }}</li>`
})
app.mount('#todo-list-app')
</script>2.运行结果文章来源：https://www.toymoban.com/news/detail-666134.html
文章来源地址https://www.toymoban.com/news/detail-666134.html
到了这里，关于vue 简单实验 自定义组件 综合应用 传参数 循环的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
