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

全局注册组件

在scrpit中 第1行开始

vue.component('my-select',{

template:`<div>全局组件内容</div>`

})

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

<my-select></my-select>

局部注册组件：在

new Vue({

el:'#app',

components:{

        `my-select`:{

        template:`<div>局部组件内容</div>`}，

`my-sleect1`:{

template:`<div>局部组件内容1</div>`}

} })

引入只能在#app这个区域中引入:<my-select></my-select> 或者 <my-select1></my-select1>

组件内部的简单交互

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

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

            return {

                num:3

            }

        },

        template:`<div>

            <button @click="num--">-</button>

            <span>{{num}}</span>

            <button @click="handlePlus">+</button>

        </div>`,

        methods: {

            handlePlus() {

                this.num++

            }

        },

    })

组件传参：

1、在组建内部定义props

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

    props:[' listData']

     template:`

<div class="my-select">

            <input type="text">

            <ul>

                <li v-for="item in listData">

                    {{item}}    

                </li>

            </ul>

        </div>

`

})

2、范围内的数据包

new Vue({  

        el:'#app',  

        data:{  //提供数据包

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

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

        }

    })

3、组件调用

<my-select :listData="skill"></my-select>

<my-select :listData="food"></my-select>