vue——全局/局部组件、单文件组件、组件的属性、全局样式、局部样式

最新推荐文章于 2024-04-23 16:26:38 发布

哈哈ha~

最新推荐文章于 2024-04-23 16:26:38 发布

阅读量1.5k

点赞数 1

分类专栏： vue.js 文章标签：前端 vue.js javascript 单文件组件全局/局部组件

本文链接：https://blog.csdn.net/qq_56668869/article/details/126707018

版权

vue.js 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

一、组件

全局组件：

所有组件共同可用的功能（全局指令、过滤器、组件）
组件的属性不能用大写字母组件的名字可以用驼峰命名法,但是使用的时候必须用连字符
全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次多次使用只显示第一个)
注册的组件不要跟系统标签同名

Vue.filter("alltool", function (str) {
            return str + "-alltool"
        })
Vue.component("allbox", {
            template: `<div>全局组件</div>`
        })
Vue.directive("color", function (el, obj) {
            el.style.color = obj.value
        })

局部组件：

只有当前组件可用的功能（全局指令、过滤器、组件）
一个vm（根组件）实例可以有多个局部组件,但是只能供当前vm实例使用

var vm = new Vue({
            el: "#eg1",
            data: {},
            methods: {},
            components: {
                Box1: {
                    template: `<div>
                        <p>{{msg|box1tool}}</p>
                        <p>{{msg1|alltool}}</p>
                              </div>`,
                    data: function () {
                        return {
                            msg: "hello",
                            msg1: "全局过滤器",
                        }
                    },
                    methods: {
                        fn() {
                            console.log("组件的全部方法")
                        }
                    },
                    //局部过滤器 只能box1使用 
                    filters: {
                        box1tool(str) {
                            return str + "box1-filter"
                        }
                    }
                },
                Box2: {
                    template: `<div>
                        <p>{{msg|box1tool}}</p>
                        <p>{{msg1|alltool}}</p>
                              </div>`,
                    //局部过滤器 box2中不能使用 只能box1使用 
                    data: function () {
                        return {
                            msg: "world",
                            msg1: "全局过滤器",
                        }
                    },
                },
            }
        })

结果显示：

组件的嵌套：

.vue文件既可以是一个页面,也可以是一个组件
它可以被别的.vue文件引入然后作为组件使用

二、单文件组件的技术点

1.在项目下创建vue.config.js 就是vue的打包配置文件:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false//关闭eslint的严格模式检测
})

2.引入文件时 @代表src目录

@是vue的脚手架集成的basepath 其他框架中没有@

//引入src目录下的Nav1.vue文件
import Nav1 from "./Nav1.vue"
//可以写为
import Nav1 from "@/Nav1.vue"

3.注册的组件名不能跟vue中的原生DOM重名,注册的名字是驼峰使用时就用连字符

如下注册的组件名为BoxDiv 使用时：<box-div></box-div>

import BoxDiv from "@/BoxDiv.vue"

4.注册的组件使用时可以用双标签也可以用单标签: 如果有插槽必须用双标签

单标签：<Nav1/>
双标签：<Nav1></Nav1>

5. .vue文件中可以只有template 至少有一个模板

在打包的时候 vue脚手架会将文件解析为一个对象然后给对象添加属性就是template模板值为解析的<template>页面的模板
即可以不写script和style 但是不能不写template style可以写多个

6.每一个组件内部只能有一个根元素不要在根元素上写v-for 循环超过2次就会出现多个根元素

三、组件的属性

属性的两种写法:

简单声明

props:["prop1","prop2"]

详细描述

props: {
	propA: Number,		// 基础的类型检查 (`null` 匹配任何类型)
	propB: [String, Number],	// 多个可能的类型
	propC: {	type: String,
     		 required: true	// 必填的字符串
   	},
	propD: {	type: Number,
      		default: 100	// 带有默认值的数字
    	},
	propE: {	type: Object,	// 带有默认值的对象或者数组填Array
		default: function () {	// 不建议直接填对象(因为对象直接量会一直占用内存),一般使用工厂函数,调用时才创建对象节省资源(面试)
        		return { message: 'hello' }
      		}
    	},
	propF: {
      		validator: function (value) {// 自定义验证函数返回为true就代表数据符合我们规定
			return ['success', 'warning', 'danger'].indexOf(value) !== -1
      		}
    	}
  }

属性可以多传但是注册了的属性就必须传不然有可能会在使用时因为取值问题出BUG

属性名不要(不是不能)用vue官方或者原生标签已经签名过的名字:比如id class href

属性的类型验证只是一种验证提示不会阻止程序运行

四、样式style

全局样式：

全局样式的写法：

在.vue文件中的style中写的样式打包后就是全局样式
写一个css文件在项目中导入就是全局样式

注：如果全局样式出现了相同的选择器：哪个是最后打包引入项目哪个的优先级就最高（就近原则）

局部样式(css作用域)：

实现：在style标签上添加：scoped="scoped" 使css只针对当前组件生效
原理：vue的插件webpack打包时会把当前组件模板中的每一个元素添加一个相同的哈希值命名的属性名，并且为添加了scoped的style中的样式选择器上添加一个属性选择器

注：vue文件中可以出现多个style标签凡是添加了scoped属性的,里面的选择器就会被修改没添加scoped属性的就不会被修改

五、组件基础面试题

组件中的基础语法常见的面试题方向:

1、 @ 是一个关键字,在引入的文件路径中它代表src目录

2 、template:组件的模板中只能有一个根节点

3 、v-slot: 插槽, 具名插槽 slot,slot-scope过时了 2.6.0使用v-slot 语法:v-slot:插槽名语法糖:#插槽名没有指定插槽名就是默认插入到插槽,不给插槽插入数据的话,就会使用组件的slot标签的尖括号中的数据插槽名不用使用引号引起来,直接写变量名插入的内容必须是template标签或者组件不能是原生的元素

4、组件的data为什么是个函数然后返回对象,以前使用vm时都是个对象

组件和挂载到界面的vm对象的区别，vm挂载到页面上时，触发了钩子函数的，data生成了，页面上使用的数据就是data容器中渲染上去的，而且页面只有一个vm对象，所以的vm生成完毕(mouted)时data必须存在

组件是引入和注册以后不一定使用的，比如for循环0次就是组件对象生成了的，但是使用0次，所以组件对象并没有使用自己的data容器去渲染数据，造成资源浪费，解决方案就是懒加载：当使用data时去调用，才生成data对象

组件的data 设计成function的用义:组件可以多次使用,每使用一次,函数被调用一次则创建出不同的数据对象,实现同名组件的数据可以相互独立

5、 scoped: style标签的scoped="scoped" 生成css的使用作用域只有当前组件内部的选择器生效