Vue2&3全面知识总结三

感兴趣的朋友可以去我的语雀平台进行查看更多的知识。
https://www.yuque.com/ambition-bcpii/muziteng

3. Vue组件化编程

3.1 模块与组件、模块化与组件化

模块

• 理解：向外提供特定功能的js程序，一般就是一个js文件
• 为什么：js文件很多很复杂
• 作用：复用、简化js的编写，提高js运行效率

组件

• 定义：用来实现局部功能的代码和资源的集合（html/css/js/image…）
• 为什么：一个界面的功能很复杂
• 作用：复用编码，简化项目编码，提高运行效率

模块化

• 当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用

组件化

• 当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

3.2 非单文件使用

非单文件组件：一个文件中包含有n个组件

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

3.2.1 基本使用

Vue中使用组件的三大步骤

1. 定义组件

   使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别

   • el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el才决定服务哪个容器
   • data必须写成函数，避免组件被复用时，数据存在引用关系

2. 注册组件

   • 局部注册：new Vue()的时候options传入components选项
   • 全局注册：Vue.component('组件名',组件)

3. 使用组件

   编写组件标签如 <school></school>

<div id="app">
    <h2>{{msg}}</h2><br/>
    <!--第三步：编写组件标签-->
    <school></school>
    <student></student>
    <hello></hello>
</div>

<div id="app2">
    <!--由于是全局注册的组件，所以可以使用-->
    <hello></hello>
</div>
<script>
    Vue.config.productionTip = false;
    // 第一步：创建school组件
    const school = Vue.extend({
        // el: "#app", 定义组件的时候，一定不要写el配置项
        // 因为最终所有的组件都要被一个vm管理，由vm决定服务哪个容器
        template: '<div class="demo"><h3>学校名称：{{schoolName}}</h3><h3>学校地址：{{address}}<br/><button @click="showName">点我提示学校名</button></h3></div>',
        data() {
            return {
                schoolName: "CQJTU",
                address: "重庆南岸"
            }
        },
        methods: {
            showName() {
                alert(this.schoolName);
            }
        },
    });

    // 创建student组件
    const student = Vue.extend({
        template: '<div><h3>学生姓名：{{studentName}}</h3><h3>学生年龄：{{age}}</h3></div>',
        data() {
            return {
                studentName: '张三',
                age: 18,
            }
        }
    });

    // 创建hello组件
    const hello = Vue.extend({
        template: '<div><h3>你好啊！{{name}}</h3></div>',
        data() {
            return {
                name: "Teng",
            }
        }
    });

    // 第二部：全局注册组件
    Vue.component('hello', hello);

    // 创建vm
    new Vue({
        el: "#app",
        data: {
            msg: "你好！",
        },
        // 第二步：注册组件(局部注册)
        components: {
            school,
            student,
        }
    });

    new Vue({
        el: "#app2",
    })
</script>

3.2.2 组件注意事项

关于组件名

• 一个单词组成
  • 第一种写法（首字母小写）：school
  • 第二种写法（首字母大写）：School
• 多个单词组成
  • 第一种写法（kebab-case 命名）：my-school
  • 第二种写法（CamelCase 命名）：MySchool（需要Vue脚手架支持）
• 备注
  • 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
  • 可以使用name配置项指定组件在开发者工具中呈现的名字

关于组件标签

• 第一种写法：<school></school>
• 第二种写法：<school/>（需要Vue脚手架支持）
• 备注：不使用脚手架时，<school/>会导致后续组件不能渲染

一个简写方式：const school = Vue.extend(options)可简写为const school = options，因为父组件components引入的时候会

自动创建

<div id="app">
    <h2>{{msg}}</h2>
    <school></school>
</div>
<script>
    // 定义组件
    const school = Vue.extend({
        name: 'school', // 组件给自己起个名字，用于在浏览器开发工具上显示
        template: `
            <div>
                <h3>学校名称：{{name}}</h3>
                <h3>学校地址：{{address}}</h3>
            </div>
        `,
        data() {
            return {
                name: "CQJTU",
                address: "重庆",
            }
        }
    })

    new Vue({
        el: "#app",
        data: {
            msg: "欢迎学习Vue！",
        },
        components: {
            school,
        }
    })
</script>

3.2.3 组件的嵌套

<div id="root"></div>
<script>
    const student = Vue.extend({
        name: "student",
        template: `
          <div>
          <h4>学生姓名：{{ name }}</h4>
          <h4>学生年龄：{{ age }}</h4>
          </div>
        `,
        data() {
            return {
                name: "Teng",
                age: 20,
            }
        }
    });

    const school = Vue.extend({
        name: 'school',
        template: `
          <div>
          <h3>学校名称：{{ name }}</h3>
          <h3>学校地址：{{ address }}</h3>
          <student></student>
          </div>
        `,
        data() {
            return {
                name: "CQJTU",
                address: "重庆",
            }
        },
        // 注册组件（局部）
        components: {
            student,
        }
    });

    // 定义hello组件
    const hello = Vue.extend({
        template: `<h3>{{ msg }}</h3>`,
        data() {
            return {
                msg: '欢迎进行学习！！！',
            }
        }
    });

    // 定义app组件
    const app = Vue.extend({
        template: `
          <div>
          <hello></hello>
          <school></school>
          </div>
        `,
        components: {
            hello,
            school,
        }
    })

    // 创建vm
    new Vue({
        el: "#root",
        template: `
          <app></app>`,
        // 注册组件（局部注册）
        components: {
            app,
        }
    })
</script>

3.2.4 VueComponent

关于VueComponent

• school组件本质是一个名为**VueComponent的构造函数**，且不是程序员定义的，而是Vue.extend()生成的

• 我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的new

  VueComponent(options)

• 每次调用Vue.extend，返回的都是一个全新的VueComponent，即不同组件是不同的对象

• 关于this指向

  • 组件配置中data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是**VueComponent实例对象**

  • new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是**Vue实**

    例对象

• VueComponent的实例对象，以后简称vc（组件实例对象） Vue的实例对象，以后简称vm

<div id="root">
    <school></school>
    <hello></hello>
</div>
<script>
    const school = Vue.extend({
        name: "school",
        template: `
          <div>
          <h2>学校名称：{{ name }}</h2>
          <h2>学校地址：{{ address }}</h2>
          <button @click="showName">点我提示学校名</button>
          </div>
        `,
        data() {
            return {
                name: "CQJTU",
                address: "重庆市南岸",
            }
        },
        methods: {
            showName() {
                // 组件中的this指的是VueComponent
                console.log('showName', this);
            }
        }
    });

    const test = Vue.extend({
        template: '<span>cqjtu</span>'
    })

    const hello = Vue.extend({
        template: `
          <div>
          <h2>{{ msg }}</h2>
          <test></test>
          </div>
        `,
        data() {
            return {
                msg: "你好！",
            }
        },
        components: {
            test,
        }
    });

    console.log('@', school);
    console.log('#', hello);

    const vm = new Vue({
        el: "#root",
        components: {
            school,
            hello
        }
    })
</script>

3.2.5 一个重要的内置关系

一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype

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

<div id="root">
    <school></school>
</div>
<script>
    Vue.prototype.x = 99;
    const school = Vue.extend({
        name: 'school',
        template: `
          <div>
          <h3>学校名称：{{ name }}</h3>
          <h3>学校地址：{{ address }}</h3>
          <button @click="showX">点我输出x</button>
          </div>
        `,
        data() {
            return {
                name: "CQJTU",
                address: "重庆",
            }
        },
        methods: {
            showX() {
                // 能输出x
                console.log(this.x);
            }
        }
    });

    const vm = new Vue({
        el: "#root",
        data: {
            msg: "你好！"
        },
        components: {
            school
        }
    });
    console.log(vm);
    console.log(school.prototype.__proto__ === Vue.prototype);  // true
</script>

3.3 单文件组件

School.vue

<template>
  <div id="demo">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName">点我提示学校名字</button>
  </div>
</template>

<script>
export default {
  name: "School",
  data() {
    return {
      name: "CQJTU",
      address: "重庆市南岸区",
    }
  },
  methods: {
    showName() {
      alert(this.name);
    }
  }
}
</script>

<style scoped>
  #demo {
    background: skyblue;
  }
</style>

Student.vue

<template>
  <div>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生年龄：{{ age }}</h2>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      name: "Teng",
      age: 20,
    }
  }
}
</script>

<style scoped>

</style>

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 scoped>

</style>

main.js

import App from "./App";

new Vue({
    el: "#root",
    // template: "<App></App>",
    components: {
        App,
    }
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单文件组件</title>
</head>
<body>
<!--准备一个容器-->
<div id="root">
    <App></App>
</div>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

上述最终的代码无法运行是由于浏览器不支持ES6的语法，但上述是Vue脚手架的大致模块。放在脚手架中即可运行。