VUE基本语法——组件

ybb_ymm

已于 2023-04-24 08:37:14 修改

阅读量661

点赞数

分类专栏：从0到1了解vue2及vue3更新内容文章标签： vue.js 前端 javascript

于 2023-04-24 07:20:08 首次发布

本文链接：https://blog.csdn.net/ybb_ymm/article/details/130321098

版权

从0到1了解vue2及vue3更新内容专栏收录该内容

19 篇文章 0 订阅

订阅专栏

什么是组件

组件其实就是实现应用中的局部功能的代码和资源的一个集合。

他是用来简化项目代码、提高代码复用度以此提高运行的效率

非单文件组件

一个文件中他包含了N个组件。

单文件组件

一个文件中他包含且只包含一个组件

如何定义一个组件

我们使用Vue.extend（opeions）可以创建一个组件

我们可以看到options和new Vue（options）时候传入的参数看名字是一样的，他们也是you却别的：

1、自定义组件的时候，不能写el。（el是有vm来决定那个容器来显示的。）

2、data必须要写成函数形式，不能像new Vue那样写（当组件不我们复用的时候，避免数据存在应用关系）

3、通过使用template可以配置组件的结构信息

简写方式

const student = Vue.extent(options)他和下面的简写实现的效果是一致的。

const school = options

组件名定义

1、一个单词组成

1）、首字母小写：student

2）、首字母大写：Student

2、多个单词组成

1）、kebab-case命名：her-student

2）、CamelCase命名：HerStudent（这种方式是需要我们使用Vue脚手架创建项目）

注意：

1、定义组件名字的时候，要避免使用Html中已经拥有的元素名称、比如：a

2、可以使用name这个配置项来制定组件在开发者工具中呈现的名字

如何注册一个组件

两种注册方式：局部注册和全局注册

1、使用Vue.component('组件名',组件）来实现全局注册

2、使用new Vue的时候传入components选项来实现局部注册

编写组件标签

1、<我们自定义的组件标签></我们自定义的组件标签>

2、<我们自定义的组件标签/> 这种方式是在使用脚手架创建的时候才会起作用

使用组件的步骤

1、创建组件（我们首先要自己定义/创建一个组件）

2、注册组件

3、使用组件（通过组件标签来实现）

对VueComponent的理解

从单词表面理解为：Vue的组件

1、Student组件，他本质上是一个名为VueComponent的构造函数，并且他不是我们程序员来定义的，而是由Vue.extent给我们生成的。

2、其实说得简单点是vue帮我们处理了，我们在使用的时候只要写<studeng></studeng>或者<Student/>了，Vue在解析的时候就会自动替我们来创建了student组件的一个实例对象。

3、我们在每次去调用Vue.extent的时候，他返回的都是新床架的VueCompent

4、组件配置的data函数、watch内函数、methods内的函数computeuted内的函数，他们统统都是指向了VueCompent的实例对象，我们可以简称为组件的实例对象

5、new Vue(options)中配置的data函数、watch内函数、methods内的函数computeuted内的函数，他们统统都是指向了Vue的实例对象，也就是我们常说的vm

重要的内置关系

VueComponent.prototype.__proto__ === Vue.prototype

之所以作者给我们提供了这个属性，就是为了让我们的组件实例对象，可以很轻松的访问到Vue原型上的属性以及方法

demo

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8" />
       <title>一个重要的内置关系</title>
       
       <script type="text/javascript" src="../js/vue.js"></script>
   </head>
   <body>
       
       <div id="root">
           <student></student>
       </div>
   </body>

       //定义student组件
       const student = Vue.extend({
           name:'student',
           template:`
               <div>
                   <h2>学校名称：{{name}}</h2>
                   <h2>学校地址：{{address}}</h2>
                   <button @click="showX">点我输出x</button>
               </div>
           `,
           data(){
               return {
                   name:'北大青鸟',
                   address:'宣武门'
               }
           },
           methods: {
               showX(){
                   console.log(this.x)
               }
           },
       })

       //创建一个vm
       const vm = new Vue({
           el:'#root',
           data:{
               msg:'你好'
           },
           components:{student}
       })

       //定义一个构造函数
       /* function Demo(){
           this.a = 1
           this.b = 2
       }
       //创建一个Demo的实例对象
       const d = new Demo()

console.log(Demo.prototype) //显示原型属性

console.log(d.__proto__) //隐式原型属性

console.log(Demo.prototype === d.__proto__)

//程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
Demo.prototype.x = 199

console.log('@',d) */

</script>
</html>

好了，今天关于vue中组件的内容就到这里。

欢迎大家点击下方卡片，关注《coder练习生》