Vue 组件基础

定义组件 Vue.component

        Vue.component("comp-button",{
            data:function(){ //data必须以函数的形式返回
                return{
                    count:0
                }
            },
            template:`count:{{count}}` //定义html
        })

props 接受父组件的传值

Vue.component("my-nav",{
            props:["name"],
            template:`
{{name}}
`
         })

props也可以接受一个对象

    

        
    
///注意，此处需要用v-bind来绑定动态值

         Vue.component("my-nav",{
            props:["menu"],
            template:`
{{menu.prevName}}>{{menu.curName}}
`
         })

         var vm=new Vue({
            el:"#app",
            data:{
                menu:{
                    prevName:"Home",
                    curName:"Product"
                }
            }
         })

在组件上用v-for实现对象数组

        

                
        
    
         Vue.component("left-nav",{
            props:["menu"],
            template:`
{{menu.name}}
`
         })

         var vm=new Vue({
            el:"#app",
            data:{
                menus:[{
                    id:1,
                    name:"home"
                },{
                    id:2,
                    name:"product"
                }
                ]
            }
         })

通过事件向父组件传递消息

通过emit还接受第二个参数，用于动态传值；

    

        

                
        
    
         Vue.component("left-nav",{
            props:["menu"],
            template:`
{{menu.name}}
`
         })

         var vm=new Vue({
            el:"#app",
            data:{
                menus:[{
                    id:1,
                    name:"home"
                },{
                    id:2,
                    name:"product"
                }
                ]
            },
            methods:{
                call:function(e){
                    console.log(e);
                }
            }
         })

插槽分发内容

         Vue.component("tip-message",{
            template:`
              

                
Notice:
                
              
            `
         })

        
            this is a tip message