Vue 组件之非单文件组件

Posted 2021-12-30 啵啵丶

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 组件之非单文件组件相关的知识，希望对你有一定的参考价值。

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

一、组件

组件的定义——实现应用中局部功能代码和资源的集合

组件：

理解：用来实现局部（特定）功能效果的代码集（html/css/js...）
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编程，提高运行效率

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

模块化：当应用中的 js 都以模块来缩写的，那这个应用就是一个模块化的应用（相当于把一个.js文件分成多个.js文件）

二、Vue 中使用组件的三大步骤

三大步骤：

1. 定义组件（创建组件）

2. 注册组件

3. 使用组件（写组件标签）

1. 定义组件

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

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

备注：使用 template 可以配置组件结构

2. 注册组件

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

3. 编写组件标签

<组件名></组件名>

完整步骤代码：

<!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="./js/vue.js"></script>
</head>
<body>
    <div id="root">
        <school></school>
        <hr>
        <student></student>
    </div>
    <script>
        Vue.config.productionTip = false
        //创建名为 school 的组件
        const school = Vue.extend(
            template:
            `
            <div>
                <h2>学校名称:schoolName</h2>
                <h2>学校地址:address</h2>
            </div>
            `,
            data()
                return 
                    schoolName:'尚硅谷',
                    address:'北京'
                
            
        )
        //创建名为 student 的组件
        const student = Vue.extend(
            template: 
            `
            <div>
                <h2>学生姓名:studentName</h2>
                <h2>学生年龄:age</h2>
            </div>
            `,
            data()
                return 
                    studentName:'张三',
                    age: 18
                
            
        )
        Vue.component('student',student)   //全局指令
        new Vue(
            el:'#root',
            components:
                school,   //局部指令
            
        )
    </script>
</body>
</html>

三、组件的嵌套

定义一个 app 组件，用来管理所有的组件，最后 app 被 Vue 实例所管理， app 只管它分支下面的组件，在分支中的组件自有分支自己管理，不用写在 app 中

组件嵌套代码：

<!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="./js/vue.js"></script>
</head>
<body>
    <div id="root">
    </div>
    <script>
        Vue.config.productionTip = false
        const student = 
            template:
            `
            <div>
                <h2>学生名称:studentName</h2>
                <h2>学生年龄:age</h2>
            </div>
            `,
            data()
                return 
                    studentName:'张三',
                    age: 18
                
            
        
        const school = 
            template: 
            `
            <div>
                <h2>学校名称:schoolName</h2>
                <h2>学校地址:address</h2>
                <student></student>
            </div>
            `,
            data()
                return 
                    schoolName:'尚硅谷',
                    address:'北京'
                
            ,
            components:
                student
            
        
        const hello = 
            template:`<h2>msg</h2>`,
            data()
                return 
                    msg: 'hello'
                
            
        
        const app = 
            template: 
            `
            <div>
            <school></school>
            <hello></hello>
            </div>
            `,
            components:
                school,
                hello
            
        
        new Vue(
            el:'#root',
            template:`<app></app>`,
            components:
                app
            

        )
    </script>
</body>
</html>

其中我们可以看到在 school 组件中写了 components: student ，说明 student 组件是嵌套在 school 组件中的，归 school 组件管理，而 app 组件中 components 下有两个组件名，说明它们是平级的，且归 app 管理