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>

运行结果:
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

·傻蛋儿·

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值