Vue——day12之组件

WenGyyyL2024-09-13 2:39

目录

组件类型

非单文件组件

整体代码示例

小总结

常见注意点

组件的嵌套

代码示例

VueComponent

VC和VM内置关系

单文件组件

单文件组件整体代码

School

Student

App

main.js

index.html

总结

组件类型

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

非单文件组件

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

javascript 复制代码 
// 引入模板、样式和脚本
<script src="my-component.js"></script>
<link rel="stylesheet" href="my-component.css">

// 创建组件
<div id="app">
  <my-component></my-component>
</div>
javascript 复制代码 
// my-component.js
Vue.component('my-component', {
  template: '<div class="my-component">Hello World</div>'
});

// my-component.css
.my-component {
  background-color: red;
}

整体代码示例

html 复制代码 
<!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选项来注册组件。例如：
javascript 复制代码 
new Vue({
  components: {
    'component-name': component
  }
})
  1. 全局注册：使用Vue.component('component-name', component)来注册全局组件。例如：
javascript 复制代码 
Vue.component('component-name', component);

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

三、使用组件： 在模板中使用组件时，只需在HTML中写入组件标签，类似于普通的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

组件的嵌套

代码示例
html 复制代码 
<!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
        }
    })

    // 创建vm
    new 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）来编译成浏览器可识别的代码。例如：

html 复制代码 
<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>

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

javascript 复制代码 
import MyComponent from './MyComponent.vue';

new Vue({
  el: '#app',
  components: {
    MyComponent
  }
});

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

html 复制代码 
<my-component></my-component>

单文件组件整体代码

School
html 复制代码 
<!-- 组件的结构 -->
<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
html 复制代码 
<!-- 组件的结构 -->
<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
html 复制代码 
<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
html 复制代码 
import App from './App.vue'

new Vue({
    el:'#root',
    template:`<App></App>`,
    components:{App}
})
index.html
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>

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

总结

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

相关推荐
(⊙o⊙)~哦18 分钟前
JavaScript substring() 方法
前端
无心使然云中漫步40 分钟前
GIS OGC之WMTS地图服务，通过Capabilities XML描述文档，获取matrixIds，origin，计算resolutions
前端·javascript
Bug缔造者1 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_1 小时前
解决ruoyi-vue-pro-master框架引入报错，启动报错问题
前端·javascript·vue.js
罗政2 小时前
[附源码]超简洁个人博客网站搭建+SpringBoot+Vue前后端分离
vue.js·spring boot·后端
麒麟而非淇淋2 小时前
AJAX 入门 day1
前端·javascript·ajax
2401_858120532 小时前
深入理解MATLAB中的事件处理机制
前端·javascript·matlab
阿树梢2 小时前
【Vue】VueRouter路由
前端·javascript·vue.js
随笔写4 小时前
vue使用关于speak-tss插件的详细介绍
前端·javascript·vue.js
史努比.4 小时前
redis群集三种模式：主从复制、哨兵、集群
前端·bootstrap·html
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07浏览器插件——ModHeader 的分享和学习08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CCF-CSP认证考试 202406-3 文本分词 100分题解