Vue2_6

最新推荐文章于 2025-11-22 22:50:24 发布

原创最新推荐文章于 2025-11-22 22:50:24 发布 · 815 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #笔记 #学习

Vue2_6

文章目录

Vue2_6

1、组件介绍

组件是应用中局部功能代码和资源的集合

模块化：大多用模块
组件化：大多用组件

2、非单文件组件 / 单文件组件介绍

非单文件组件：一个 html 文件，装了n个组件的
单文件组件：一个 .vue 文件，就它自己一个组件

3、组件的基本使用

1.创建组件

Vue.extend()

const xiaoMing = Vue.extend({配置对象})

配置对象写的东西基本和 Vue 实例的差不多，el 和 data 有不同：

el ：el 是指定容器位置的，不需要组件自己指定容器，是由vm指定的

所以不需要写 el
data：因为组件是有很多人调用的，不可能有一个人改了_data，其他人也跟着变。

设置成函数的话，每个人调用函数都是不同位置的对象了

所以data 必须是一个函数（返回一个对象）

const xiaoMing = Vue.extend({
    // 结构中的 html 用 template 写
    // 因为在页面中引入的方式不同
    template:`
        <div>
            <h3>你好,{{ mingName }}</h3>
            <h3>你好,{{ mingAge }}</h3>
        </div>
    `,
    data() {
        return {
            mingName: '小明',
            mingAge: 12,
        }
    }
})

2.vm注册组件

components 属性

用 vm 注册组件的使用，告诉它要去那个容器服务

let vm = new Vue({
    el: '#root',
    // 有了组件就不需要写 data 了
    // 注册组件（局部注册）
    components: {
        // 组件名 : 组件，上面是变量接收了那个组件，那只是变量名
        ming: xiaoMing,
        hong: xiaoHong,
    }
});

2.1 全局注册

和之前的过滤器和自定义指令一样少个 s：component

// 全局注册      组件名      组件
Vue.component('hong', xiaoHong)

3.组件标签

用组件名（不是变量名）写的标签

<div id="root">
    <!-- 编写组件标签 -->
    <ming></ming>
    <hr>
    <hong></hong>
</div>
<div id="root2">
    <hr>
    <!-- 全局hong -->
    <hong></hong>
</div>

5.简写创建组件

a = {配置对象}

const xiaoHong = {
      template:`
    <div>
            <h3>你好,{{ hongName }}</h3>
            <h3>你好,{{ hongAge }}</h3>
    </div>
`,
      data() {
          return {
              hongName: '小红',
              hongAge: 11,
          }
      }
  }

注：其实调用了 Vue.extend，但是是在注册标签的时候才调用。普通写就在创建时就调用了

4.小注意

4.1 组件名

单个单词：
- 纯小写
- 首字母大写
多个单词：
- 单词-单词全小写：xiao-ming
- 每个单词首字母都大写：XiaoMing（但是要在脚手架上写）

给开发者工具中的组件起一个名字：

const xiaoMing = Vue.extend({
   name: 'haha',
   ...
})

注：组件标签还是使用的 vm 下注册的名字，这里只是改变了开发者工具显示的信息

4.2 组件标签2

可以这么写组件标签

<hong/>	<!--自闭和-->

但是又问题：不在脚手架模式下，多个自闭和标签最终只能显示一个，就是写一百万个<hong/>，最后只显示一个

4、组件嵌套

方法：在组件里写 components 来注册属性

const house = Vue.extend({
    template:`
        <div>
            <!--调用子组件，只能在父组件调用-->
            <student></student>
        </div>
    `,
    components: {
        // 注册子组件
        student,
    }
})

注：子组件要在父组件之前定义

Vue 里有一个 app 组件管理这所有组件

类似：

const student = {
...
}
const hello = {
...
}
const house = Vue.extend({
	...
	components: {
        // 注册子组件
        student,
    }
}) 
const app = {
    template:`
        <div>
        <house></house>
        <hello></hello>
        </div>
    `,
    components: {
        house,
        hello,
    },
}
const vm = new Vue({
    el: '#root',
    template: '<app></app>',
    components: {
    	app,
	}
});

写 template: '<app></app>', 就是为了足不出户（不在div上写），就调用所有的玩意

5、VueComponent 概念

VueComponent 翻译是 Vue组件

**VueComponent 的构造函数：**组件就是一个 VueComponent 的构造函数，是Vue.extend生成的
```
console.log(组件);
VueComponent(options) {
    this._init(options);
}
```
**创建组件的实例对象：**写了组件标签，Vue 就会在解析时创建组件的实例对象

上面不是构造函数嘛，调用的时机就是，Vue 看模版看到了组件标签
```
new VueComponent ({配置对象(就是我写的那一堆)})
```
每次调用Vue.extend，返回的都是一个全新的VueComponen。因为这个构造函数式调的时候新定义的
**组件this的指向：**VueComponent 实例对象，就像 new Vue 的 this 是Vue实例对象一样
**VueComponent 简称：**vc

总：

VueComponent（也就是vc）就是类似组件的 vm，因为this是他。
接收组件的变量，接收的是 vc 的 新整出来 的 构造函数
- this 出来的组件实例，接收变量不是组件实例，就不能使用类似 vm._data 的代码
```
student._data
undefined
```
vc 和 vm 里面东西差不多一样，但也有不一样的，比如 el 和 data