vue学习之路（八）：组件——全局组件and局部组件的注册

vue组件

组件基础知识：

1. 什么是组件
   组件是功能完整，具有复用性的独立模块，

2. 为什么需要组件化
   代码复用，提高开发效率，节省成本

3. 组件三要素：

   1. 结构 ：HTML
   2. 样式 ：CSS
   3. 功能 ：JS JQuery Vue

4. 组件内部配置
   template——模板内容，即组件内部的内容，也是自定义标签对中的内容
   data(){ return{} }——必须是个函数? 为了避免组件多次调用，data互相影响
   props——外部传入组件内部的数据
   computed——计算属性
   watch——监听
   methods——函数方法
   directives——指令
   components——组件
   created ——生命周期

5. 根元素：
   vue强制要求每一个实例都要有根元素（vue组件本质上就是一个vue实例），如下所示代码会报错。

	<div id="app"> 
        <my-list></my-list>
    </div>
    <script>
        Vue.component('my-list',{
            template:`
                <p>段落标签1</p>
                <p>段落标签2</p>`
        })
        new Vue({
            el:'#app',
            data:{
                
            }
        })
	</script>

运行结果：

正确写法：

	<script>
        Vue.component('my-list',{
            template:`
            <div>
                <p>段落标签1</p>
                <p>段落标签2</p>
            </div>
            `
        })
        new Vue({
            el:'#app',
            data:{
                
            }
        })
    </script>

注册全局组件：在实例化vue对象前注册的组件是全局组件， 注册之后可以用在任何新创建的 Vue 实例化对象中。

       语法格式：
	       Vue.component('组件名称',{ 
	       	template：`组件内容`,
		       data(){
	           	return {
	            		存储数据
	              	}
	            }
			 })

	<style>
        .box{
            width: 300px;
        }
        .box input{
            width: 100%;
            height: 30px;
        }
        .box li{
            list-style: none;
            height: 30px;
            padding: 10px;
        }
        ul{
            padding: 0;
            background-color: #d8d8d8;
        }
        .box li:hover{
            background-color: orchid;
        }
    </style>

    <div id="app"> 
    	<!-- 调用定义的全局组件 -->
        <my-list></my-list>
    </div>
    <script>
        // 全局组件：在实例化vue对象前定义的组件
        Vue.component('my-list',{
            template:`
                <div class="box">
                    <input type="text">
                    <ul>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JS</li>
                    </ul>
                </div>
                `
        })
        new Vue({
            el:'#app',
            data:{}
        })
    </script>

运行结果：
全局组件定义之后创建的任何vue实例中都可以调用该组件。

注册局部组件：在实化对象中注册的组件称为局部组件，这样组件只能在当前这个实例中使用

       语法格式：
       new Vue({
         	components:{ 
      		 '组件名称':{ 
         		template:`组件内容`,
         		data(){
        			return {
        				数据
         				}
        			}
         		}
          }
        })

	<!-- css样式代码同上 -->
	<div id="app"> 
        <!-- 调用定义的局部组件 -->
        <my-list></my-list>
    </div>
    <div id="app1">
    	<!-- 此处调用会报错 -->
        <my-list></my-list>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{},
            components:{
                'my-list':{
                    template:`
                    <div class="box">
                        <input type="text">
                        <ul>
                            <li>HTML</li>
                            <li>CSS</li>
                            <li>JS</li>
                        </ul>
                    </div> `
                }
            }
        })
        new Vue({
            el:'#app1',
            data:{}
        })
    </script>

运行结果：
在第一个vue实例中定义的局部组件，可以成功调用；在第二个vue容器中调用会报错。

全局组件数据交互：
实现效果：

1. ul列表默认情况下隐藏
2. input获取焦点时显示ul，失去焦点隐藏ul
3. 鼠标单击li标签时，标签的内容传入input输入框

	<!-- css样式代码同上 -->
	<div id="app"> 
        <my-list></my-list>
    </div>

    <script>
        // 注册全局组件
        Vue.component('my-list',{
            // template中定义组件的结构
            template:`
                <div class="my-list">
                    <input 
                        type="text" 
                        v-model="msg"
                        @focus="isShow = true"
                        @blur="isShow = false"
                    >
                    <ul v-show="isShow">
                        <li 
                            v-for="(item,index) in list" 
                            @mousedown="handleList(item)"
                        >{{item}}</li>
                    </ul>
                </div>
            `,
            data() {
                return {
                    list:['HTML','CSS','JS'],
                    msg:'',
                    isShow:false,
                }
            },
            methods: {
                handleList(str) {
                    this.msg = str
                }
            },
        })
        new Vue({
            el:'#app',
            data:{}
        })
	</script>

运行结果：