Vue组件化（全局组件/局部组件/组件传参）

全局注册组件

在scrpit中 第1行开始

vue.component('my-select',{

template:`

全局组件内容

`

})

引入可以在全局的任意位置

局部注册组件：在

new Vue({

el:'#app',

components:{

        `my-select`:{

        template:`

局部组件内容

`}，

`my-sleect1`:{

template:`

局部组件内容1

`}

} })

引入只能在#app这个区域中引入: 或者

组件内部的简单交互

Vue.component('my-num',{ //组件全局注册     

        data(){ //避免对象的引用问题

            return {

                num:3

            }

        },

        template:`

            -

            {{num}}

            +

       

`,

        methods: {

            handlePlus() {

                this.num++

            }

        },

    })

组件传参：

1、在组建内部定义props

Vue.component('my-select',{  //全局注册

    props:[' listData']

     template:`

           

           

               

•                     {{item}}    

                 

           

       

`

})

2、范围内的数据包

new Vue({  

        el:'#app',  

        data:{  //提供数据包

           food:['烤鸭','火锅','海鲜','烤全羊'],

           skill:['HTML','CSS','Vue']

        }

    })

3、组件调用