【Vue基础七】--- 组件和模块概念

最新推荐文章于 2023-07-21 16:10:03 发布

牛小小小婷～

最新推荐文章于 2023-07-21 16:10:03 发布

阅读量1k

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/hannah2233/article/details/126901002

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

文章目录

一、组件

一、组件

1-1 传统方式和组件的对比

传统方式：
- 依赖关系混乱，不好维护
- 代码复用率不高

1-2 模块和组件概念

1-2-1 模块+模块化

模块：向外提供特定功能的js程序
模块化：当应用中的js都以模块来编写时，那这个应用就是一个模块化的应用

1-2-2 组件化

组件的定义：实现应用中局部功能代码和资源的集合
复用编码，简化项目编码，提高运行效率

1-3 组件

1-3-1 非单文件组件

1-3-1-1 组件的使用

非单文件组件：一个文件中包含有n个组件
Vue中使用组件的三大步骤：
- 创建组件
- 注册组件
- 使用组件
如何定义一个组件：
- 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别：
  - el不要写，最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
  - data必须写成函数，避免组件被复用时，数据存在引用关系
- 使用template可以配置组件结构
如何注册组件
- 局部注册： new Vue传入components选项
- 全局注册： Vue.cpmponent('组件名',组件)
编写组件标签 : <school></school>
基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
    <div id="root">
        <school></school>
        <hr>
        <student></student>
    </div>
    <div id="root2">
        <student2></student2>
    </div>
    <script>
        Vue.config.produtionTip = false

        // 创建school组件 
        const school = Vue.extend({
            template: `
            <h2>学校姓名：</h2>
          `,
            data() {
                return {}
            }
        })

        // 创建student
        const student = Vue.extend({
            template: `
            <h2>学生姓名</h2>
          `
        })

        const student2 = Vue.extend({
            template: `
            <h2>safafad</h2>
          `
        })
        Vue.component('student2', student2)
        new Vue({
            el: '#root',
            components: {
                school,
                student
            }

        })

        new Vue({
            el: '#root2'
        })
    </script>
</body>

</html>

1-3-1-2 组件嵌套

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <app></app>
    </div>

</body>
<script>
    Vue.config.productionTip = false;

    const student = Vue.extend({
        name: 'student',
        template: `
          <div>
            <h2>学生姓名： {{name}}</h2>  
            <h2>学生年龄： {{age}}</h2>
          </div>
        `,
        data() {
            return {
                name: '牛婷婷',
                age: 15
            }
        }
    })

    // 创建school组件
    const school = Vue.extend({
        name: 'school',
        template: `
          <div>
            <h2>学校姓名： {{schoolName}}</h2>  
            <h2>地址： {{address}}</h2>
            <student></student>
          </div>
        `,
        data() {
            return {
                schoolName: '台历',
                address: '金钟'
            }
        },
        components: {
            student
        }
    })

    // 创建hello组件
    const helloo = Vue.extend({
        name: 'hello',
        template: `
        <div>
          <h2>Hello</h2>
        </div>
      `
    })
    const app = Vue.extend({
        name: 'app',
        template: `
        <school></school>
        <helloo></helloo>
      `,
        components: {
            school,
            helloo
        }
    })

    // 创建vm
    new Vue({
        el: '#root',
        // 第二步：注册组件（局部注册）
        components: {
            app
        }
    })
</script>


</html>

1-3-2 单文件组件

单文件组件：一个文件中只包含有1个组件

1-3-2-1 App.vue

<template>
  <div>
    <School></School>
    <Student></Student>
  </div>
</template>

<script>
import School from './School'
  import Student from './Student'

export default {
  name: 'App',
  components: {
    School,
    Student
  }
}
</script>

<style>

</style>

1-3-2-2 index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="root">
        <App></App>
    </div>
    <div id="root"></div>
    <script src="./main.js"></script>
</body>

</html>

1-3-2-1 main.js

import App from './App.veu'

new Vue({
    el: '#root',
    components: { App }
})

1-3-2-1 School.vue

<template>
   <div class="demo">
      <h2>学校姓名： {{schoolName}}</h2>  
      <h2>地址： {{address}}</h2>
    </div>
</template>

<script>
// export default {

// }

     export default ({
      name:'school',
      data() {
            return {
                schoolName: '台历',
                address: '金钟'
            }
        }
    })

</script>

<style>

</style>

1-3-2-1 Student2vue

<template>
   <div class="demo">
      <h2>学校姓名： {{name}}</h2>  
      <h2>地址： {{age}}</h2>
    </div>
</template>

<script>
    export default({
      name:'school',
      data() {
            return {
                name: '牛婷婷',
                age: 18 
            }
        }
    })

</script>

<style>

</style>

1-3-3 组件的几个注意点

1. 关于组件名：
- 一个单词组成
  - 第一种写法（首字母小写）：school
  - 第二种写法（首字母大写）： School
- 多个单词组成：
  - 第一种写法(kebab-case命名) ： ‘my-schoool’
  - CamelCase命名：MySchool(脚手架下写)
- 备注：
  - 组件名尽可能回避HTML中已有的元素名称
  - 可以使用name配置项指定组件在开发者中呈现的名字
关于组件标签：
- 一：<school></school>
- 二：<school/>
- 不用使用脚手架时
···

1-3-4 VueComponent

关于 VueComponent:
- school组件本质上一个名为VueComponent的构造函数，并不是程序员定义的，是Vue.extend生成的
- Vue解析<school/>会帮我们创建school组件的实例对象，即Vue帮我们执行的: new VueComponent(options)
- 每次调用Vue.extend,返回的都是一个全新的VueComponent
关于this指向:
- 组件配置中： data函数、methods中的函数、computed中的函数，this均是【VueComponent】
- .new Vue(options)配置中： data函数、methods中的函数、watch中的函数,它们的this均是【Vue】
- 一个重要的内置关系： VueComponent.prototype.__proto__ == Vue.prototype
- 让组件实例对象（vc）可以访问到Vue原型上的属性、方法

牛小小小婷～

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【Vue基础七】--- 组件和模块概念

h2>学校姓名： {{schoolName}}学生姓名： {{name}}地址： {{address}}学生年龄： {{age}}学校姓名：学生姓名非单文件组件：一个文件中包含有n个组件。// 第二步：注册组件（局部注册）// 创建school组件。// 创建school组件。// 创建student。// 创建hello组件。
复制链接

扫一扫