【封装组件】md

Mr_giegie

于 2022-06-09 00:43:15 发布

阅读量126

点赞数

分类专栏：小王的文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/Mr_giegie/article/details/125195379

版权

小王的专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue04 组件

组件基本介绍

组件本质上就是一个对于html , css , js进行的封装 , 达到能够复用的目的 , 核心底层就是通过JS面向对象 ,

一个组件就是一个构造方法 , 本质上就是函数

组件特性 : 输入 , 输出

原生方式实现 navitem组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试组件</title>
</head>

<body>
    

    <nav-item></nav-item>
</body>
<script src="../../../node_modules/jquery/dist/jquery.js"></script>
<script>
	//封装 :
    function navItem(selector , src , title , callback){
        this.el = $(selector); //获取元素
        this.src = src ;
        this.title = title ;
        this.navClick = callback ;
    }


    navItem.prototype.initNavItem = function(callback){
        let template = `
        <div class="navItem">
            <img src="${ this.src }" alt="">
            <div class="title">${this.title}</div>
        </div>

        <style>
            .navItem{
                width:150px;
            }
            .navItem img {
                width:100%;
                display: "block";
            }
            .title{
                font-size: 10px;
                text-align: center;
                color : #ccc ;
            }
        </style>

        `
        $(template).appendTo(this.el)
        var that = this
        this.el.find( '.navItem' ).click(function(){
            that.navClick('数据')
        })
    }

	//调用 : 

    var oNav = new navItem('nav-item')
        oNav.src = "../assets/logo.png"
        oNav.title = "Vue组件"
        oNav.navClick = function (argy){
            console.log(argy);
        }
        oNav.initNavItem();
        
</script>
</html>

vue中定义组件

创建一个.vue文件一般放在computend 里面可以通过webpack配置为com…目录设置新标识
定义组件(结构) 及样式

<template>
  <div class="navItem" @click="fn">
    <img :src="src" alt="">
    <slot></slot> //插槽
    <div class="title">{{ title }}</div>
  </div>
</template>

对外的普通属性props , 用来接收调用组件时动态传入的数据 , 可以理解为函数的形式参数

export default {
  props : [ 'src' , 'title'],
  
};

对外的回调方法参数

methods : {
    fn(){
      this.$emit('navClick' , '数据1' , '数据2')
    }
  }

插槽 slot

组件之间是互相可以进行组合的 , 因此组件定义内部插槽相当于一个占位符, 用来接收组件在调用时 , 写在组价一对标签中的内容

//组件插槽定义 
<div class="navitem">
    <img src="">
    <slot></slot>  //替换成 <h1>哈哈</h1>
    <div>{{  }}</div>
</div>

//组件调用
<nav-item> 
	<h1>哈哈</h1>
</nav-item>

vue组件调用

导入到使用的页面中

import NavItem from 'c/NavItem.vue'

在页面中进行局部的注册

export default {
  components : {
    "NavItem" : NavItem //1. 组件的注册
    // NavItem   注册形式二
    // NavItem.name   注册形式三 是全局注册
  },

在页面模板中调用

<nav-item v-for="(item , i) in in1" :key="i" :src="require('@/assets/logo.png')" title="vue组件" @navClick="fnn"></nav-item>

组件深入

局部注册

全局注册

需要将注册代码引入到main.js

先导入 , 后注册

//main.js中
import NavItem from "c/NavItem.vue";

Vue.component(NavItem.name , NavItem)

注册时动态导入

Vue.component( 'NavItem' , ()=>import('c/NavItem.vue') )

这种方法可以用js查找文件方法进行自动全局注册

Mr_giegie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【封装组件】md

小王私人的
复制链接

扫一扫

专栏目录