vue的组件

最新推荐文章于 2022-09-23 15:08:49 发布

YmwWow

最新推荐文章于 2022-09-23 15:08:49 发布

阅读量195

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/ymwwow/article/details/94839161

版权

Vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 基本的新建组件

//新建一个组件
Vue.component(todo-item,{
     template: '<li>这是个待办项</li>'
})

/*使用组件*/
<div id='app'>
   <todo-item></todo-item> 
</div>

2. 带特性prop的组件

Vue.component('todo-item',{
    props:['todo'],
    template: '<li>{{todo.text}}</li>'
})

/*组件的使用*/
<div id='app'>
    <todo-item
    v-for = 'item in list'
    v-bond:todo='item'    
    >
    </todo-item>
</div>

<script>
    var app = new Vue({
        el:'app',
        data:{
            list:[
                {text:123}, 
                {text:234}, 
                {text:345}, 
                {text:456}
           ]
        }
    })
</script>