当前位置： 首页 > news >正文

Vue——day12之组件

news 来源：原创 2024/9/20 21:41:40

目录

组件类型

非单文件组件

整体代码示例

 小总结

常见注意点

组件的嵌套

代码示例

VueComponent

VC和VM内置关系

单文件组件

单文件组件整体代码

School

Student

App

main.js

index.html

总结

组件类型

        在Vue中，组件是构建用户界面的核心概念之一。Vue中的组件可以分为两种类型：非单文件组件和单文件组件。

非单文件组件

        非单文件组件（一个文件中包含n个组件）是指将组件的模板、样式和脚本代码分别写在不同的文件中，然后通过在页面中引入这些文件来创建组件。在Vue中，可以使用Vue.component()方法来定义非单文件组件。例如：

// 引入模板、样式和脚本
<script src="my-component.js"></script>
<link rel="stylesheet" href="my-component.css">// 创建组件
<div id="app"><my-component></my-component>
</div>


// my-component.js
Vue.component('my-component', {template: '<div class="my-component">Hello World</div>'
});// my-component.css
.my-component {background-color: red;
}

整体代码示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><script type="text/javascript" src="../../js/vue.js"></script>
</head>
</head>
<body><div id="root"><h1>{{mag}}</h1>
<hr><!-- 第三步编写组件标签 --><company></company><hr><employee></employee><all></all></div>
<hr><div id="root2"><all></all></div></body><script type="text/javascript">Vue.config.productionTip=false// 创建company组件const company = Vue.extend({template:`<div><h2>公司名称:{{companyName}}</h2><h2>公司地址:{{companyAddress}}</h2><button @click="showName">点我显示公司名</button></div>`,// 配置对象// el:'#root', 一定别写恶劣、配置项，因为最终所有的组件都要被vm管理// 然后由vm组件决定服务于那个容器data(){return {companyName:'迈首科技',companyAddress:'成都春熙路',}},methods: {showName(){alert('公司名: '+ this.companyName)}},})// 创建company组件const employee = Vue.extend({template:`<div><h2>员工名称:{{employeeName}}</h2><h2>员工地址:{{employeeAge}}</h2></div>`,// 配置对象// el:'#root', 一定别写恶劣、配置项，因为最终所有的组件都要被vm管理// 然后由vm组件决定服务于那个容器data(){return {employeeName:'WJG',employeeAge:666}}})// 创建全局组件const all = Vue.extend({template:`<div><h2>谁都可以用！！！{{name}}</h2></div>`,data(){return {name:'奥特曼'}}})// 全局注册组件Vue.component('all',all)new Vue({el:'#root2'})new Vue({el:'#root',data:{mag:'瓦坎达！！！'},// 注册组件（局部注册）components:{// 组件名：定义时候的组件名company:company,employee:employee}});
</script>
</html>

 小总结

Vue中使用组件的三大步骤如下：

一、定义组件： 使用Vue.extend(options)来创建组件，其中options和使用new Vue(options)时传入的那个options几乎是一样的，但也有一些区别。区别如下：

  1. 不要在组件定义中写el选项，因为最终所有的组件都要经过一个vm（Vue实例）的管理，由vm中的el选项决定服务于哪个容器。
  2. 必须将data选项写成一个函数，而不是一个对象，这样做是为了避免组件被复用时，数据存在引用关系的问题。 备注：可以使用template选项来配置组件的结构。

二、注册组件：

  1. 局部注册：在创建Vue实例时，通过components选项来注册组件。例如：
new Vue({components: {'component-name': component}
})

  1. 全局注册：使用Vue.component('component-name', component)来注册全局组件。例如：
Vue.component('component-name', component);

        在全局注册后，该组件可以在任何Vue实例中使用。

三、使用组件： 在模板中使用组件时，只需在HTML中写入组件标签，类似于普通的HTML标签。例如：

<component-name></component-name>

        在使用组件时，可以像使用普通HTML标签一样，添加属性、绑定事件等。

        注意：在使用组件之前，需要确保组件已经被定义和注册，否则会导致无法正确渲染组件。

常见注意点

几个注意点：

  1. 关于组件名:

    • 单词组成的组件名可以有两种写法：
      • 首字母小写：school
      • 首字母大写：School
    • 多个单词组成的组件名可以有两种写法：
      • kebab-case命名：my-school
      • CamelCase命名：MySchool（需要Vue脚手架支持）
    • 注意：
      • 组件名应避免与HTML中已有的元素名称冲突，例如避免使用h2、H2等作为组件名。
      • 可以使用name配置项指定组件在开发者工具中呈现的名字。

  2. 关于组件标签:

    • 组件标签有两种写法：
      • 第一种写法：<school></school>
      • 第二种写法：<school/>
    • 备注：如果不使用Vue脚手架，使用<school/>会导致后续组件不能正确渲染。

  3. 简写方式：

    • const school = Vue.extend(options)可以简写为：const school = options

组件的嵌套

代码示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>组件的嵌套</title><script type="text/javascript" src="../../js/vue.js"></script>
</head>
</head>
<body><div id="root"></div></body><script type="text/javascript">Vue.config.productionTip=false// 定义hello组件const hello = Vue.extend({template:`<div><h1>{{msg}}</h1></div>`,data(){return {msg:'欢迎━(*｀∀´*)ノ亻!'}}})// 定义student组件const student = Vue.extend({template:`<div><h2>学生名称:{{name}}</h2><h2>学生年龄:{{age}}</h2></div>`,data(){return{name:'马冬梅',age:20}}})// 定义school组件const school = Vue.extend({template:`<div><h2>学校名称:{{name}}</h2><h2>学校地址:{{address}}</h2><student></student><hello></hello></div>`,data(){return{name:'迈首大学',address:'深圳'}},components:{// 注册子组件（局部）student}})// 创建app组件const app = Vue.extend({template:`<div><hello></hello><school></school></div>`,components:{school,hello}})// 创建vmnew Vue({template:`<app></app>`,el:'#root',// 注册主键components:{app}});
</script>
</html>

VueComponent

关于Vue组件：

  1. school 组件本质是一个名为 VueComponent 的构造函数，它是由 Vue.extend 生成的。

  2. 当我们写 <school></school> 或 <school /> 时，Vue 在解析时会帮我们创建 school 组件的实例对象，实际上是执行了 new VueComponent(options)。

  3. 需要注意的是，每次调用 Vue.extend 都会返回一个全新的 VueComponent(VueComponent的不同实例)。

  4. 关于 this 的指向：

    • 在组件配置中，如 data 函数、methods 中的函数、watch 中的函数、computed 中的函数，它们的 this 均指向当前的 VueComponent 实例对象。
    • 在 new Vue() 的配置中，如 data 函数、methods 中的函数、watch 中的函数、computed 中的函数，它们的 this 均指向当前的 Vue 实例对象。

  5. VueComponent 实例对象可以简称为 vc（也可以称之为组件实例对象），Vue 的实例对象可以简称为 vm。

VC和VM内置关系

1.一个重要的内置关系:VueComponent.prototype._proto_ === Vue.prototype

2.为什么要有这个关系:让组件实例对象(vc）可以访问到 Vue原型上的属性、方法
 

单文件组件

        单文件组件（一个文件中包含1个组件）是指将组件的模板、样式和脚本代码都写在同一个文件中，通常使用.vue后缀的文件来表示。在单文件组件中，可以使用<template>标签定义组件的模板，<style>标签定义组件的样式，<script>标签定义组件的脚本。单文件组件需要通过构建工具（如webpack）来编译成浏览器可识别的代码。例如：

<template><div class="my-component">Hello World</div>
</template><style scoped>
.my-component {background-color: red;
}
</style><script>
export default {name: 'MyComponent',data() {return {message: 'Hello World'}}
}
</script>

        在页面中使用单文件组件时，需要通过导入并注册组件后才能使用。例如：

import MyComponent from './MyComponent.vue';new Vue({el: '#app',components: {MyComponent}
});

        然后就可以在页面中使用该组件了：

<my-component></my-component>

单文件组件整体代码

School
<!-- 组件的结构 -->
<template><div class="demo"><h2>学校的名称:{{schoolName}}</h2><h2>学校的地址:{{address}}</h2><button @click="showName">点我提示学校名</button></div>
</template><!-- 组件交互相关代码(数据，方法) -->
<script>// 第一种暴露方法（分别暴露）：export const school = Vue.extend({// const school = Vue.extend({export default {// 定义文件名name:'School',data(){return{schoolName:'迈首学校',address:'深圳'}},methods: {showName(){alert(this.showName)}},}// 第二种暴露方法(统一暴露):export {school}// export {school}// 第三种暴露方法(默认暴露):export default school// export default school</script><!-- 组件的样式 -->
<style>.demo{background-color: orange;}
</style>
Student
<!-- 组件的结构 -->
<template><div><h2>学生名称:{{name}}</h2><h2>学生年龄:{{age}}</h2><button @click="showName">点我提示学校名</button></div>
</template><!-- 组件交互相关代码(数据，方法) -->
<script>// 第一种暴露方法（分别暴露）：export const school = Vue.extend({// const school = Vue.extend({export default {// 定义文件名name:'Student',data(){return{name:'马冬梅',age:'22'}}}</script><!-- 组件的样式 -->
<style>.demo{background-color: orange;}
</style>
App
<template><div><School></School><Student></Student></div>
</template><script>// 引入组件
import School from './School.vue'
import Student from './Student.vue'export default {name:'App',components:{School,Student}}
</script><style></style>
main.js
import App from './App.vue'new Vue({el:'#root',template:`<App></App>`,components:{App}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单文件组件html</title>
</head>
<body><div id="root"></div><script type="text/javascript" src="../../../js/vue.js"></script><script type="text/javascript" src="./main.js"></script>
</body>
</html>

上述的代码只差放入脚手架便可以运行，具体可以看下一篇文章

总结

        总结来说，非单文件组件适用于简单的组件或者需要动态加载的组件，而单文件组件适用于复杂的组件或者需要在多个页面复用的组件。使用单文件组件可以更好地组织和管理组件的代码，提高代码的可读性和复用性。

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • web项目如何部署到服务器上呢？——麻烦的方法
  • sqlalchemy FastAPI 前端实现数据库增删改查
  • 快速上手指南：在Windows系统中下载Ollama，一键启动大模型体验！
  • P2P应用
  • 自己动手实现mybatis的底层框架(不用动态代理直接用执行器、用动态代理自己实现。图文分析！)
  • 智慧教室无纸化同屏方案是否适用RTMP？
  • virtual cells 相关软件整理
  • 直播相关01-录制麦克风声音，QT上 .pro 将 linux，mac和windows上配置为三种可以共享, 在.pro文件中 message 的作用
  • 【数据库】MySQL-基础篇-函数
  • 批量创建文件夹和文件——excel VBA实现
  • Aigtek功率放大器在超声检测陶瓷复合材料内部缺陷中的应用
  • HTML5 `＜button＞` 标签深入全面解析
  • 运动耳机精选分享，热门骨传导耳机运动好物推荐！
  • 10款超好用的文件加密软件推荐｜企业文件加密的好选择
  • 中国碳排放交易试点城市名单DID（2000-2022年）
  • .pyc 想到的一些问题
  • @angular/forms 源码解析之双向绑定
  • 【个人向】《HTTP图解》阅后小结
  • Essential Studio for ASP.NET Web Forms 2017 v2，新增自定义树形网格工具栏
  • HTTP请求重发
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • Java到底能干嘛？
  • JS函数式编程 数组部分风格 ES6版
  • Js基础——数据类型之Null和Undefined
  • leetcode-27. Remove Element
  • Python爬虫--- 1.3 BS4库的解析器
  • Rancher-k8s加速安装文档
  • Spark in action on Kubernetes - Playground搭建与架构浅析
  • SpiderData 2019年2月25日 DApp数据排行榜
  • 道格拉斯-普克 抽稀算法 附javascript实现
  • 基于 Ueditor 的现代化编辑器 Neditor 1.5.4 发布
  • 前端临床手札——文件上传
  • 使用前端开发工具包WijmoJS - 创建自定义DropDownTree控件（包含源代码）
  • 《码出高效》学习笔记与书中错误记录
  • hi-nginx-1.3.4编译安装
  • $.ajax()参数及用法
  • $分析了六十多年间100万字的政府工作报告，我看到了这样的变迁
  • （day 12）JavaScript学习笔记（数组3）
  • （Redis使用系列） Springboot 使用redis实现接口幂等性拦截 十一
  • (差分)胡桃爱原石
  • （大众金融）SQL server面试题（1）-总销售量最少的3个型号的车及其总销售量
  • （分布式缓存）Redis哨兵
  • （附源码）ssm本科教学合格评估管理系统 毕业设计 180916
  • （附源码）基于SpringBoot和Vue的厨到家服务平台的设计与实现 毕业设计 063133
  • (解决办法)ASP.NET导出Excel，打开时提示“您尝试打开文件'XXX.xls'的格式与文件扩展名指定文件不一致
  • （每日一问）操作系统：常见的 Linux 指令详解
  • （免费领源码）python#django#mysql公交线路查询系统85021- 计算机毕业设计项目选题推荐
  • （南京观海微电子）——示波器使用介绍
  • （四）搭建容器云管理平台笔记—安装ETCD(不使用证书)
  • (学习总结16)C++模版2
  • （转）es进行聚合操作时提示Fielddata is disabled on text fields by default
  • (转)jQuery 基础
  • (转)Sql Server 保留几位小数的两种做法
  • .NET Core 将实体类转换为 SQL(ORM 映射)
  • .NET 发展历程