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>

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

总结

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

相关推荐
午安～婉几秒前
硅谷甄选（续2）首页
java·前端·javascript
NULL Not NULL1 分钟前
Vue 前端面试题（含答案）大全 v2025
前端·javascript·vue.js
苏州第一深情5 分钟前
终结加班眼酸？明基RD280U测评：程序员的双倍快乐，竟是4K护眼大屏给的！
前端·后端
i18nsite10 分钟前
互联网重构日记：1 - 开篇
前端·后端
洋不写bug11 分钟前
html表格，无序，有序，自定义，无语义，表单标签，特殊字符详解
前端·html
JarvanMo22 分钟前
Flutter. 适用于 GetX 5 的 CLI (命令行接口/工具)
前端
dyxal26 分钟前
VS Code 1.52.1 对应一些插件版本
前端·chrome
李剑一30 分钟前
vitepress中logo打包丢失
vue.js
融化的雪38 分钟前
reactflow整理节点，尾节点位置的大坑
开发语言·前端·javascript
Gazer_S1 小时前
【理解React Hooks与JavaScript类型系统】
前端·javascript·react.js
热门推荐
01两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答02GitHub 镜像站点03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05GitLab 零基础入门指南：从安装到项目管理全流程06Linux下V2Ray安装配置指南072025 最新教程：注册并切换到美区 Apple ID0846个Nano-banana 精选提示词，持续更新中09Labelme从安装到标注：零基础完整指南10UV 工具安装与国内镜像源配置指南