初识 Vue（04）---(组件化改造TodoList)

组件化改造TodoList

原始代码

    
    
    


    

        
        提交
        

            
{{item}}
        
  
    

    
  

全局组件

Vue.component( )        创建全局组件的方法

        Vue.component("TodoItem",{
            template:"
todo item
"
        })

 创建全局组件，组件名字叫做"TodoItem", template 是模板，内容是 

todo item

。

 

使用 TodoItem 组件代替前面的

• {{item}}

 

写成    即可

   

但无论输入什么，输出都是 todo item，为解决这个问题    

引入 v-bind  ：向子组件传入绑定值；写成     

在循环 list 的时候，把 list 的每个值赋值给 item ,再将 item 以 v-bind 的形式传给 todo-item(通过 content 变量传递)；

子组件接受内容： props:['content'] , 子组件可以接受到 content 的值 ，content 值是 item ，item 值是 list 的每一项 ,则

props 接收到了list 的每一项的值 ，则在

中显示出来即可 ，即 template:"

" + this.content + "

"

故将 template:"

" + this.content + "

"  改为  

{{content}}

组件化代码（全局组件）

    
    
    


    

        
        提交
        
         
    

       



         
    

局部组件

    
    
    


    

        
        提交
        
         
    

       


   var TodoItem = {
            props:['content'],
            template:"
{{content}}
"
        }

        var app = new Vue({
            el: '#app',
            components:{
                TodoItem:TodoItem
            },
            data:{
                list: [],
                inputValue:''
            },
            methods:{
                handleBtnClick:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
       

将 TodoItem 注册到实例之中 ，原来是 TodoItem  ，在实例中仍然是 TodoItem ，注册后再用 todo-item 即可