旅游平台网站建设方案/百度收录接口
普通组件的注册使用-局部注册
一. 组件注册的两种方式:
1.局部注册:只能在注册的组件内使用
(1) 创建 vue 文件(单文件组件)
(2) 在使用的组件内导入,并注册 components:{ 组件名: 组件对象 }
// 导入需要注册的组件
import 组件对象 from.vue文件路径
import HmHeader from './components/XxHeader'export default { // 局部注册components: {组件名: 组件对象HmHeader: HmHeader}
}
2.全局注册:所有组件内都能直接使用(不需要再次导入)
(1) 创建 .vue文件(单文件组件)
(2) main.js 内导入, 并进行全局注册 Vue.component(组件名, 组件对象)
// main.js
// 导入需要全局注册的组件
import XxButton from './components/XxButton'// 调用 Vue.component 进行全局注册
// Vue.component('组件名',组件对象)
Vue.component('XxButton', XxButton )
二. 使用:
* 当成 html 标签使用 <组件名></组件名>
* 技巧: 一般都用局部注册,如果发现确实是通用组件,再抽离到全局
三. 注意:
* 组件名规范 -> 大驼峰命名法, 如 XxHeader
局部注册代码演示:
// 子组件: components / XxHeader.vue
<template><div class="xx-header">我是头部组件xx-header</div></template><script>export default{}</script><style>.xx-header{height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color:white;}</style>
//子组件: components / XxMain.vue
<template><div class="xx-main">我是主体组件xx-main</div></template><script>export default{}</script><style>.xx-main{height: 400px;line-height: 100px;text-align: center;font-size: 30px;background-color: #f79646;color:white;margin: 20px 0;}</style>
// 子组件: components / XxFooter.vue
<template><div class="xx-footer">我是低部组件xx-footer</div></template><script>export default{}</script><style>.xx-footer{height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #4f81bd;color:white;}</style>
// 根组件 App.vue
<template><div class="App"><!-- 头部组件 --><XxHeader></XxHeader><!-- 主体组件 --><XxMain></XxMain><!-- 底部组件 --><XxFooter></XxFooter><!--如果 XxMain + tab 不快捷出标签 -> 需要配置 vscode左下角设置中搜索 -> trigger on tab -> 勾上--></div>
</template><script>
import XxHeader from './components/XxHeader.vue'
import XxMain from './components/XxMain.vue'
import XxFooter from './components/XxFooter.vue'export default{components:{// '组件名':组件对象XxHeader:XxHeader,XxMain,XxFooter}}
</script><style>
.App{width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px;
}
</style>
全局注册代码演示:
// 子组件: components / XxButton.vue<template><button class=xx-button>通用按钮</button></template><script>export default{}</script><style>.xx-button{height: 50px;line-height: 50px;padding: 0 20px;background-color: #3bae56;border-radius: 5px;
}</style>
// main.js 进行全局注册// 文件核心作用: 导入App.vue, 基于App.vue创建结构渲染index.htmlimport Vue from 'vue'
import App from './App.vue'// 1. 编写导入的代码,往代码的顶部编写(规范)
import XxButton from './components/XxButton'Vue.config.productionTip = false// 2. 组件进行全局注册 -> 在所有的组件范围内都能直接使用
// Vue.component(组件名,组件对象)
Vue.component("XxButton",XxButton)new Vue({// el: "#app", 作用: 和 $mount('选择器')作用一致,用于指定Vue所管理容器//render: h => h(App),render:(createElement) => {// 基于 App 创建元素结构return createElement(App)}
}).$mount('#app')
// 在其他组件直接使用(不需要导入) XxFooter.vue<template><div class="xx-footer">我是低部组件xx-footer<!-- 全局组件使用 --><XxButton></XxButton></div></template>
相关文章:

19-普通组件的注册使用
普通组件的注册使用-局部注册 一. 组件注册的两种方式:1.局部注册:只能在注册的组件内使用 (1) 创建 vue 文件(单文件组件) (2) 在使用的组件内导入,并注册 components:{ 组件名: 组件对象 } // 导入需要注册的组件 import 组件对象 from.vue文件路径 import HmHeader from ./…...

Java基础篇:抽象类与接口
1、抽象类和接口的定义: (1)抽象类主要用来抽取子类的通用特性,作为子类的模板,它不能被实例化,只能被用作为子类的超类。 (2)接口是抽象方法的集合,声明了一系列的方法…...

面对对象编程范式
本文是阅读《设计模式之美》的总结和心得,跳过了书中对面试和工作用处不大或不多的知识点,总结总共分为三章,分别是面对对象编程范式、设计原则和设计模式 现如今,编程范式存在三种,它们分别是面向对象编程、面向过程编…...

“深度学习”学习日记:Tensorflow实现VGG每一个卷积层的可视化
2023.8.19 深度学习的卷积对于初学者是非常抽象,当时在入门学习的时候直接劝退一大班人,还好我坚持了下来。可视化时用到的图片(我们学校的一角!!!)以下展示了一个卷积和一次Relu的变化 作者使…...

146. LRU 缓存
题目描述 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类: LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存int get(int key) 如果关键字 key 存在于缓存中,则返回关键字的值,否…...

Unity框架学习--场景切换管理器
活动场景 用脚本实例化的游戏对象都会生成在活动场景中。 哪个场景是活动场景,则当前的天空盒就会使用该场景的天空盒。 只能有一个场景是活动场景。 在Hierarchy右击一个场景,点击“Set Active Scene”可以手动把这个场景设置为活动场景。也可以使用…...

Kotlin Lambda和高阶函数
Lambda和高阶函数 本文链接: 文章目录 Lambda和高阶函数 lambda输出(返回类型)深入探究泛型 inline原理探究 高阶函数集合、泛型自己实现Kotlin内置函数 扩展函数原理companion object 原理 > 静态内部类函数式编程 lambda 1、lambda的由…...

ELKstack-Elasticsearch配置与使用
一. 部署前准备 最小化安装 Centos 7.x/Ubuntu x86_64 操作系统的虚拟机,vcpu 2,内存 4G 或更多, 操作系统盘 50G,主机名设置规则为 es-server-nodeX , 额外添加一块单独的数据磁盘 大小为 50G 并格式化挂载到/data/e…...

Kotlin 基础教程二
constructor 构造器一般情况下可以简化为主构造器 即: class A constructor(参数) : 父类 (参数) 也可以在构造器上直接声明属性constructor ( var name) 这样可以全局访问 init { } 将和成员变量一起初始化 susped 挂起 data class 可以简化一些bean类 比如get / set ,自动…...

K8S deployment挂载
挂载到emptyDir 挂载在如下目录,此目录是pod所在的node节点主机的目录,此目录下的data即对应容器里的/usr/share/nginx/html,实现目录挂载;图1红框里的号对应docker 的name中的编号,如下俩个图 apiVersion: apps/v1 k…...

类之间的比较
作者简介: zoro-1,目前大一,正在学习Java,数据结构等 作者主页: zoro-1的主页 欢迎大家点赞 👍 收藏 ⭐ 加关注哦!💖💖 类之间的比较 固定需求式比较器 固定需求式 通过…...

设计模式之备忘录模式(Memento)的C++实现
1、备忘录模式的提出 在软件功能开发过程中,某些对象的状态在转换过程中,由于业务场景需要,要求对象能够回溯到对象之前某个点的状态。如果使用一些共有接口来让其他对象得到对象的状态,便会暴露对象的实现细节。备忘录模式是在不…...

学习笔记230804---restful风格的接口,delete的传参方式问题
如果后端提供的删除接口是restful风格,那么使用地址栏拼接的方式发送请求,数据放在主体中,后端接受不到,当然也还有一种可能,后端在这个接口的接参设置上是req.query接参。 问题描述 今天遇到的问题是,de…...

STM32使用IIC通信的引脚配置问题
STM32使用IIC通信的引脚配置问题 在使用IIC通信时,遇到引脚配置问题,记录一下: IIC的两个引脚SDA和SCL都要求既能输入又能输出。 问题: SDA线是由不同的器件分时控制的,这样就会有一个问题:当一个器件主动…...

题解 | #K.First Last# 2023牛客暑期多校10
K.First Last 签到题 题目大意 n n n 个人参加 m m m 场比赛,每场比赛中获得名次得概率均等 问针对某一人,他在所有场次比赛中都获得第一或倒数第一的概率 解题思路 如果人数 n > 1 n>1 n>1 ,每场比赛的概率是 p 2 n p\dfra…...

Python 程序设计入门(025)—— 使用 os 模块操作文件与目录
Python 程序设计入门(025)—— 使用 os 模块操作文件与目录 目录 Python 程序设计入门(025)—— 使用 os 模块操作文件与目录一、操作目录的常用函数1、os 模块提供的操作目录的函数2、os.path 模块提供的操作目录的函数 二、相对…...

excel逻辑函数篇1
1、AND(logical1,[logical2],…):用于测试所有条件是否均为TRUE 检查所有参数均为true,如果是则返回true 2、OR(logical1,[logical2],…):用于测试是否有为TRUE的条件 如果任意参数值为true,即返回true;只有当所有参数…...

前端基础(Vue的模块化开发)
目录 前言 响应式基础 ref reactive 学习成果展示 Vue项目搭建 总结 前言 前面学习了前端HMTL、CSS样式、JavaScript以及Vue框架的简单适用,接下来运用前面的基础继续学习Vue,运用前端模块化编程的思想。 响应式基础 ref reactive 关于ref和react…...

SystemVerilog interface使用说明
1. Interface概念 System Verilog中引入了接口定义,接口与module 等价的定义,是要在其他的接口、module中直接定义,不能写在块语句中,跟class是不同的。接口是将一组线捆绑起来,可以将接口传递给module。 2. 接口的优…...

机器人制作开源方案 | 送餐机器人
作者:赖志彩、曹柳洲、王恩开、李雪儿、杨玉凯 单位:华北科技学院 指导老师:张伟杰、罗建国 一、作品简介 1. 场景调研 1.1项目目的 近年来,全国多地疫情频发,且其传染性极高,食品接触是传播途径之一。…...

Gradio部署应用到服务器不能正常访问
用Gradio部署一个基于ChatGLM-6B的应用,发布到团队的服务器上(局域网,公网不能访问),我将gradio应用发布到服务器的9001端口 import gradio as gr with gr.Blocks() as demo:......demo.queue().launch(server_port90…...

数据暴涨时代,该如何数据治理?_光点科技
随着信息技术的迅猛发展,数据已经成为现代社会的核心资源。在这个被称为"数据暴涨时代"的时代里,大量的数据源源不断地被产生和积累,但如何有效地管理、分析和利用这些数据成为了一个迫切需要解决的问题。数据治理,作为…...

2021年03月 C/C++(三级)真题解析#中国电子学会#全国青少年软件编程等级考试
第1题:找和为K的两个元素 在一个长度为n(n < 1000)的整数序列中,判断是否存在某两个元素之和为k。 时间限制:1000 内存限制:65536 输入 第一行输入序列的长度n和k,用空格分开。 第二行输入序列中的n个整数ÿ…...

GPT-5出世?OpenAI GPT-5商标已注册
OpenAI的GPT已经成为了业界标杆,升级速度之快让人瞠目,别人追GPT-3.5的时候GPT-4横空出世,差距被拉开了,现在GPT-5就要来了。 据商标律师泄露的消息,OpenAI已于7月18日注册了GPT-5商标。虽然注册商标并不罕见…...

优雅的使用 Dockerfile 定制镜像
一、使用 Dockerfile 定制镜像 1.1、Dockerfile 定制镜像 镜像的定制实际上就是定制每一层所添加的配置、文件。如果我们可以把每一层修改、安装、构建、操作的命令都写入一个脚本,用这个脚本来构建、定制镜像,无法重复的问题、镜像构建透明性的问题、…...

limit的用法mysql
当你在 MySQL 数据库中使用 LIMIT 语句,它可以用于限制查询结果的行数。这在分页查询或者限制返回的数据量时非常有用。下面是一些示例: 返回前几行数据: SELECT * FROM Customers LIMIT 5;这将返回 Customers 表中的前 5 行数据。 分页查…...

clickhouse Checksum doesn‘t match: 问题修复
1. 问题描述 SQL 错误 [40] [07000]: Code: 40. DB::Exception: Checksum doesnt match: corrupted data. Reference: 50e8c1efa78de2881b725d44b04be1fe. Actual: 161c99eb681ec36b83540ecdd65ad8c9. Size of compressed block: 32846. The mismatch is caused by single bit…...

企业如何开展个人信息安全影响评估(PIA)二
基本概念 根据《信息安全 技术个人信息安全影响评估指南》(GB/T 39335—2020;personal information security impact assessment,简称“PIA”),个人信息安全影响评估是指针对个人信息处理活动,检验其合法合…...

android TextView 超出长度使用省略号
在Android中最常见的需求,就是在在外部展示信息时,需要简要展示内容。TextView仅需在静态布局文件中设置以下几个属性: android:maxWidth“100dp” // 宽度是多少才算超出 android:maxLines"2" // 高度多少才算超出 android:elli…...

c++ | 字节转换 | 字长 | 机器位数
为什么有的时候脑子转不过来?? 为什么要对字节、机器长啊、位啊都要门清 位数 一般的就是指计算机的位数,比如64位/32位,更简单的理解,计算机就是在不停的做二进制的计算,比如32位计算机,在长…...