Vue06-非单文件组件和单文件组件

 

Vue06-非单文件组件和单文件组件

1.非单文件组件-模块化和组件化的定义

  1. 模块是向外提供特定功能的js程序, 一般就是一个js文件。
  2. 组件的定义：实现应用中局部功能代码和资源的集合。
  3. 模块化：当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。
  4. 组件化：当应用中的功能都是用组件的方式来编写的, 那这个应用就是一个组件化的应用。
  5. vue中的两种组件。非单文件组件：一个文件中包含n个组件；单文件组件，一个文件中只包含1个组件，即xxx.vue文件，一个xxx.vue文件只包含一个组件。

2.非单文件组件-非单文件组件的基本使用

<body>
<!--
    1 组件使用的三个步骤。
        创建组件。
        注册组件，全局注册或者局部注册，通常情况下局部注册使用的较多。
        使用组件，模板中写组件标签。

    2 创建组件。
        Vue.extent(options)，Vue.extent(options)和new Vue(options)传递的options几乎一样，区别是
            1 组件实例中不能写el，因为组件由vm决定服务的容器。
            2 组件中data必须是函数，方便组件被多个地方引用时数据的修改，避免组件复用时数据存在引用关系。
            3 使用template配置页面结构。

    3 注册注册。
        1 局部注册，new Vue({components: {}})。
        2 全局注册，Vue.component(组件名, 组件);
-->
<div id="app">
    <!-- 4 使用组件，通过组件标签使用组件 -->
    <school></school>
    <hr>
    <student></student>
    <person></person>
</div>

<div id="root01">
    <person></person>
</div>
<script>
    // 1 创建组件。
    const school = Vue.extend({
        // 定义组件时，不能写el配置项，因为所有的组件最终都会被vm管理，由vm决定服务的容器。
        // el: '#app',

        // 组件中的data需要写为函数形式，方便在多个地方的复用。
        // data写为函数形式，多个地方调用就有多个返回值，一个地方的修改不会对其他地方的修改产生影响。
        data() {
            return {
                name: 'A01',
                address: '北京'
            }
        },
        methods: {
            showName() {
                alert(this.name);
            }
        },
        template: `
            <div>
                <h2>学校名 {{name}}</h2>
                <h2>学校地址 {{address}}</h2>
                <button @click="showName">点击</button>
            </div>
        `
    });

    const student = Vue.extend({
        data() {
            return {
                name: 'tom',
                address: '上海'
            }
        },
        template: `
            <div>
                <h2>学生名 {{name}}</h2>
                <h2>学生地址 {{address}}</h2>
            </div>
        `
    });

    const person = Vue.extend({
        data() {
            return {
                name: 'alice',
                address: '不知道'
            }
        },
        template: `
            <div>
                <h2>名 {{name}}</h2>
                <h2>地址 {{address}}</h2>
            </div>
        `
    });

    // 全局注册组件，全局注册组件之后，所有的vm实例都可以使用。
    Vue.component('person', person);
    const vm01 = new Vue({
        el: '#app',
        // 2 局部注册组件。
        // components中通过key和value配置组件，key为组件名，value为组件。
        components: {
            school: school,
            student: student
        }
    });

    const vm02 = new Vue({
        el: '#root01'
    })
</script>
</body>

3.非单文件组件-组件的命名

<body>
<div id="app">
    <!--
        1 组件的命名。
            一个单词时的两种写法。
                首字母小写。school
                首字母大写。School。

            多个单词时的两种写法。
                第一种写法，my-school
                第二种写法，MySchool，需要Vue脚手架支持。

            其他。
                组件命名尽可能回避HTML中已有的元素名称，如h2，H2都不行。
                可以使用name配置项指定组件在开发中工具中的名称。

        2 组件标签的写法。
            第一个写法，<school></school>
            第二种写法，<school/>，
            其他，如果没有使用vue脚手架，使用第二种写法<school/>会导致后续组件不能渲染。

        3 创建组件的简写方式。
            const school = Vue.extent(options)，可以简写为 const school = options
    -->
    <school></school>
    <School></School>
    <my-school></my-school>
    <!--<MySchool></MySchool>-->

    <student></student>
</div>

<script>
    const school = Vue.extend({
        data() {
            return {
                name: 'A01',
                address: '北京'
            }
        },
        template: `
            <div>
                <h2>学校名 {{name}}</h2>
                <h2>学校地址 {{address}}</h2>
            </div>
        `
    });

    // 组件的简写，直接将组件定义为一个对象，vue会调用Vue.extend();
    const student = {
        // 可以通过name配置项定义组件在vue开发中工具中的名字。
        name: 'MyStudent',
        data() {
            return {
                name: 'tom',
                address: '北京'
            }
        },
        template: `
            <div>
                <h2>名 {{name}}</h2>
                <h2>地址 {{address}}</h2>
            </div>
        `
    };
    const vm01 = new Vue({
        el: '#app',
        components: {
            // 1 组件的命令。
            // 如果是一个字母，可以将这个字母小写。
            school: school,
            // 如果是一个字母，可以将这个字母的首字母大写，表示他是一个组件。
            School: school,

            // 如果是多个字母，多个字母小写，使用-连接。
            'my-school': school,

            // 多个字母时首字母大写，需要在脚手架的环境中使用。
            // HTML中引入vue.js的环境中不能将多个单词的首字母大写，会报错。
            // MySchool: school,

            student
        }
    });
</script>
</body>

4.非单文件组件-组件的嵌套

<body>
<div id="app">
</div>
<script>
    const student = Vue.extend({
        data() {
            return {
                name: 'tom',
                address: '北京'
            }
        },
        template: `
            <div>
                <h2>名 {{name}}</h2>
                <h2>地址 {{address}}</h2>
            </div>
        `
    });

    const school = Vue.extend({
        data() {
            return {
                name: 'A01',
                address: '北京'
            }
        },
        template: `
            <div>
                <h2>学校名 {{name}}</h2>
                <h2>学校地址 {{address}}</h2>
                <student></student>
            </div>
        `,
        // 组件的嵌套，在school组件中定义student组件，
        // 然后就可以在school的template中使用student组件标签了。
        components: {
            student: student
        }
    });

    const app = Vue.extend({
        template: `
            <school></school>
        `,
        components: {
            school
        }
    });

    // 实际开发中vm只管理一个组件app，然后由app管理众多的组件。
    const vm01 = new Vue({
        el: '#app',
        template: `
            <app></app>
        `,
        components: {
            app
        }
    });
</script>
</body>

5.非单文件组件-VueComponent

<body>

<div id="app">
    <!--
    1 school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend()生成的。
    2 当vue解析到<school/>或者<school></school>时，会帮助我们创建school组件的实例对象，即
        vue帮助我们执行new VueComponent(options)。

    3 当每次调用Vue.extend()时都会返回一个全新的VueComponent。

    4 关于组件的this指向。
        1 组件配置对象中，data函数、methods中的函数、watch中的函数、computed中的函数，
            他们中的this均指向VueComponent实例对象。

        2 new Vue()时，data函数、methods中的函数、watch中的函数、computed中的函数，
            他们中的this均指向Vue实例对象。

    5 VueComponent实例对象简称vc，也可称为Vue组件实例对象。Vue实例对象简称vm。
    -->
    <school></school>
    <school></school>
</div>

<script>
    const school = Vue.extend({
        data() {
            return {
                name: 'A01',
                address: '北京'
            }
        },
        template: `
            <div>
                <h2>学校名 {{name}}</h2>
                <h2>学校地址 {{address}}</h2>
            </div>
        `,
    });

    console.log(school); // Vue组件是一个名为VueComponent的构造函数。
    const vm = new Vue({
        el: '#app',
        components: {
            school
        }
    });
</script>
</body>

6.非单文件组件-一个重要的内置关系

<body>
<div id="app">
    <!--
    1 一个重要的内置关系。VueComponent.prototype.__proto__ === Vue.prototype。
    2 如此设计内置关系的原因。让组件对象vc可以访问到Vue原型上的属性和方法。
    -->
</div>
<script>
    function Demo() {
        this.a = 1;
        this.b = 2;
    }
    let d = new Demo();

    console.log(Demo.prototype); // 显示原型属性
    console.log(d.__proto__); // 隐式原型属性

    // 通过显示原型属性操作原型对象，添加x属性，值为100。
    Demo.prototype.x = 100;

    const school = Vue.extend({
        data() {
            return {
                name: 'A01',
                address: '北京'
            }
        },
        template: `
            <div>
                <h2>学校名 {{name}}</h2>
                <h2>学校地址 {{address}}</h2>
            </div>
        `,
    });

    const vm = new Vue({
        el: '#app',
        components: {
            school
        }
    });

    console.log(school.prototype.__proto__ === Vue.prototype); // true
</script>
</body>

7.单文件组件简单案例

  1. index.html。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单文件组件练习</title>
</head>
<body>

<div id="root">
    <script src="../js/vue.js"></script>
    <script src="./main.js"></script>
</div>
</body>
</html>
  1. main.js。
import App from './App.vue'

new Vue({
    el: '#root',
    template: `<App></App>`,
    components: {
        App
    }
});
  1. App.vue。
<template>
    <div>
        <School></School>
        <Student></Student>
    </div>
</template>
<script>
    // 引入组件
    import School from './School.vue'
    import Student from './Student.vue'

    export default {
        components: {
            School,
            Student
        }
    }
</script>
  1. School.vue。
<template>
    <!--组件的结构-->
    <div class="demo">
        <h2>学校名 {{name}}</h2>
        <h2>学习地址 {{address}}</h2>
        <button @click="showName">点击</button>
    </div>
</template>

<script>
    // 组件相互交换的代码，JavaScript代码

    // 导出
    export default {
        name: "School",
        data: {
            name: 'A01',
            address: '地址'
        },
        methods: {
            showName() {
                alert(name);
            }
        }
    }
</script>

<style>
    /*组件的样式代码*/
    .demo {
        background-color: orange;
    }
</style>
  1. Student.vue。
<template>
    <!--组件的结构-->
    <div>
        <h2>学生名 {{name}}</h2>
        <h2>学生地址 {{address}}</h2>
    </div>
</template>

<script>
    // 组件相互交换的代码，JavaScript代码

    // 导出
    export default {
        name: "Student",
        data: {
            name: 'tom',
            address: '北京'
        }
    }
</script>
posted @   行稳致远方  阅读(165)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
·  Vue16-Vue UI组件库
·  Vue07-脚手架+ref+props+插件+scoped
·  23-Vue组件化编程-非单文件组件
·  前端Vue2-Day52
·  2.Vue组件
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示
AI IDE Trae