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>

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

总结

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

相关推荐
ziyue75754 分钟前
vue修改element-ui的默认的class
前端·vue.js·ui
树叶会结冰25 分钟前
HTML语义化：当网页会说话
前端·html
冰万森31 分钟前
解决 React 项目初始化（npx create-react-app）速度慢的 7 个实用方案
前端·react.js·前端框架
牧羊人_myr43 分钟前
Ajax 技术详解
前端
浩男孩1 小时前
🍀封装个 Button 组件，使用 vitest 来测试一下
前端
蓝银草同学1 小时前
阿里 Iconfont 项目丢失？手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空1 小时前
重学React —— React事件机制 vs 浏览器事件机制
前端
程序定小飞2 小时前
基于springboot的在线商城系统设计与开发
java·数据库·vue.js·spring boot·后端
一小池勺2 小时前
CommonJS
前端·面试
热门推荐
01两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答02GitHub 镜像站点03UV安装并设置国内源04智能库存管理的需求预测模型：从业务痛点到落地代码的完整实践0546个Nano-banana 精选提示词，持续更新中06Linux下V2Ray安装配置指南07GitLab 零基础入门指南：从安装到项目管理全流程08一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示09jdk21下载、安装（Windows、Linux、macOS）10Cursor Plan Mode：AI 终于知道先想后做了