Vue 组件基础

定义组件 Vue.component

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

<comp-button></comp-button>

props 接受父组件的传值

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

<my-nav name="home"><my-nav>

props也可以接受一个对象

    <div id="app">
        <my-nav v-bind:menu="menu"><my-nav>
    </div>
///注意，此处需要用v-bind来绑定动态值

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

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

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

<div id="app">
        <ul>
                <left-nav v-for="menu in menus"
                v-bind:menu="menu"><left-nav>
        </ul>
    </div>
         Vue.component("left-nav",{
            props:["menu"],
            template:`<li><a :href="menu.id">{{menu.name}}</a></li>`
         })

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

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

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

    <div id="app">
        <ul>
                <left-nav v-for="menu in menus" v-on:call="call"
                v-bind:menu="menu"><left-nav>
        </ul>
    </div>
         Vue.component("left-nav",{
            props:["menu"],
            template:`<li><a v-on:click="$emit('call',menu.id)">{{menu.name}}</a></li>`
         })

         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:`
              <div>
                <p>Notice:</p>
                <slot></slot>
              </div>
            `
         })

        <tip-message>
            this is a tip message
        </tip-message>