Vue中使用组件的三大步骤：

1、定义组件（创建）

2、注册组件

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

一、如何定义一个组件？

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

区别如下：

（1）el不要写，为什么？---最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

（2）data必须写成函数，为什么？---避免组件被复用时，数据存在引用关系

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

二、如何注册组件？

（1）局部注册：new Vue的时候传入components选项

（2）全局注册：靠Vue.component('组件‘，组件)

三、编写组件标签：

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

    <script type="text/javascript" src="../js/vue.js"></script>

    <title>非单文件组件</title>

</head>

<body>

    <div id="root">

        <h2 style="background-color: antiquewhite; ">{{msg}}非单文件组件</h2>

        <hr>

        <!--引入组件，编写组件标签-->

        <xuexiao></xuexiao>

        <hr>

        <xuesheng></xuesheng>

        <hr>

        <xuesheng></xuesheng>

    </div>

</body>

<script type="text/javascript">

    Vue.config.productionTip = false;

    //组件作用：复用编码，简化项目编码，提供运行效率

    //(1.1)创建school组件

    const school=Vue.extend({

        // el:"#root",//定义组价时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器

        template:`

            <div>

                <h2>学校名:{{schoolName}}!</h2>

                <h2>学校地址:{{address}}!</h2>

                <button @click="showSchoolName">点我提示学校名</button>

            </div>

        `,

        data(){//写成函数式

            return{

                schoolName:"尚硅谷",

                address:"背景昌平",

            }

        },

        methods:{

            showSchoolName(){

                alert(this.schoolName);

            }

        }

    })

    //(1.2)创建学生组件

    const student = Vue.extend({

        template:`

            <div>

                <h2>学生名：{{studentName}}</h2>

                <h2>年龄：{{age}}</h2>

            </div>

        `,

        data:function(){

            return{

                studentName:"张三",

                age:18,

            }

        }

    })

    //(2.2)全局注册组件

    Vue.component('xuexiao',school)

    Vue.component('xuesheng',student)

    new Vue({

        el:"#root",

        data:{

            msg:"你好啊！"

        },

        //(2.1)局部注册组件

        components:{

            // xuexiao:school,

            // xuesheng:student

        }

    })

</script>

</html>

结果图（注意：第2个学生组件修改年龄后，第1个学生组件的年龄不会跟着改变，因为data使用了函数式，是创建了一份数据给每个使用的组件）：

几个注意点：

1、关于组件名：

（1）一个单词组成：首字母大写（School）或首字母小写（school）

（2）多单词组成：kebab-case命名（my-school）或者CamelCase命名（MySchool，这种写法需要脚手架支持）

（3）组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行

（4）可以使用name配置项指定组件在开发者工具中呈现的名字。

2、关于组件标签：

（1）<school></school>

（2）<school/>

（3）不用脚手架时，<school/>会导致后续组件不能渲染

3、简写：

const school = Vue.extend(options) ==>const school = options

4、一般会定义一个“app”组件来管理多个子组件

关于组件 （VueComponent）:

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

2、我们只需要写<school/>或<school><school>,Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)

3、特别注意：每次调用Vue.extend,返回的都是一个全新的VueComponent

4、关于this指向

（1）组件配置中，data函数、methods中的函数、watch中的函数、computed中的函数 他们的this均是【VueComponent实例对象】

（2）.new Vue(options)配置中，data函数、methods中的函数、watch中的函数、computed中的函数 他们的this均是【Vue实例对象】。

视频：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=57&spm_id_from=pageDriver&vd_source=60a28e8364654bee938864b1d19905ec
第53、54、55、56、57集

Vue 非单文件组件（不常用）3步骤（创建、注册、使用）和几个注意点、组件的本质（VueComponent）的更多相关文章

  1. 前端学习笔记系列一：2 Vue的单文件组件

    (1)非单文件vue组件和单文件vue组件的一般写法 一个完整的vue组件会包括三个部分:一是template模板部分,二是js程序逻辑部分,三是css样式部分.每个组件都有属于自己的模板,js和样式 ...

  2. vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

    第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行 ...

  3. Vue学习之--------组件的基本使用（非单文件组件）（代码实现）（2022/7/22）

    文章目录 1.为啥要使用组件 2.基本使用 3.代码实例 4.测试效果 5.注意点 1.为啥要使用组件 好用啊.像堆积木一样 2.基本使用 Vue中使用组件的三大步骤: 一.定义组件(创建组件) 二. ...

  4. vue.js单文件组件中非父子组件的传值

    最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官 ...

  5. Vue之单文件组件的数据传递,axios请求数据及路由router

    1.传递数据 例如,我们希望把父组件的数据传递给子组件. 可以通过props属性来进行传递. 传递数据三个步骤: 步骤1:在父组件中,调用子组件的组名处,使用属性值的方式往下传递数据 <Menu ...

  6. vue的单文件组件

    五. 单文件组件 1. .vue文件 .vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html.css.js .vu ...

  7. vue+vux+es6+webpack移动端常用配置步骤

    1.创建项目(vue项目的流程就不多讲了)2.cnpm install vux --save3.在build/webpack.base.conf.js配置:const vuxLoader = requ ...

  8. vue单文件组件的构建

    在很多Vue项目中,我们使用 Vue.component 来定义全局组件,这种方式在很多中小规模的项目中运作的很好. 但当在更复杂的项目中,就有了很大的弊端. 我们就可以用文件扩展名 .vue的单文件 ...

  9. Vuejs - 单文件组件

    为什么需要单文件组件 在之前的实例中,我们都是通过 Vue.component 或者 components 属性的方式来定义组件,这种方式在很多中小规模的项目中还好,但在复杂的项目中,下面这些缺点就非 ...

  10. Java 单文件、多文件上传 / 实现上传进度条

    博客地址:https://ainyi.com/76 日常,工作 在这里总结一下上传吧(是以前做过的练习,就汇总到个人博客吧) java ssm 框架实现文件上传 实现:单文件上传.多文件上传(单选和多 ...

随机推荐

  1. 如何使用ChatGPT来自动化Python任务

    1.概述 最近,比较火热的ChatGPT很受欢迎.今天,笔者为大家来介绍一下ChatGPT能做哪些事情. 2.内容 ChatGPT是一款由OpenAI开发的专门从事对话的AI聊天机器人.它的目标是让A ...

  2. 在生产中部署 ES2015+ 代码

    大多数 Web 开发人员都喜欢编写具有所有最新语言特性的 JavaScript--async/await.类.箭头函数等.然而,尽管事实上所有现代浏览器都可以运行 ES2015+ 代码并原生支持我刚才 ...

  3. [OpenCV实战]18 Opencv中的单应性矩阵Homography

    目录 1 介绍 1.1 什么是Homography 1.2 使用Homography进行图像对齐 1.3 Homography的应用-全景拼接 2 Homography的计算 3 总结 4 参考 &l ...

  4. CLISP学习(二)

    它是一门函数式语言,你要用函数的思维来思考. 只不过与数学的表达不同的是,数学里的函数是在括号外  f(x) ,而lisp是在括号内,以列表的形式(f x), cos(x) --> (cos x ...

  5. Java学习笔记：2022年1月13日(其一)

    Java学习笔记:2022年1月13日(其一) ​ 摘要:这篇笔记主要讲解了Java中的自定义类.以及构造一个类时所需要了解的一些重点知识. 目录 Java学习笔记:2022年1月13日(其一) 1. ...

  6. 低版本客户端连接高版本数据库报错ORA-28040、ORA-01017

    测试环境: 客户端:Oracle 11.2.0.1 服务端:Oracle 19.16 测试过程: 1.低版本客户端连接高版本数据库报错ORA-28040 2.低版本客户端连接高版本数据库报错ORA-0 ...

  7. vue element admin 关闭eslint校验

    vue.config.js里面进行设置 lintOnSave: false, // lintOnSave: process.env.NODE_ENV === 'development',

  8. PHP判断访问来源是PC端还是移动端

    一个方法轻松搞定,各种判断后当返回true为移动端,反之为PC端. function isMobile(){ // 如果有HTTP_X_WAP_PROFILE则一定是移动设备 if (isset ($ ...

  9. 快速入门API Explorer

    摘要:华为云API Explorer为开发者提供一站式API解决方案统一平台,集成华为云服务所有开放 API,支持全量快速检索.可视化调试.帮助文档.代码示例等能力,帮助开发者快速查找.学习API和使 ...

  10. 对List集合进行分页

    1 简要说明 有时候,我们有一个list集合,需要对它进行分页处理 下面的根据类MyPageUtilVo就可以做到 它自带泛型,适合各种集合 可以设置每页的大小(默认为10) 根据页码(从1开始)就可 ...