从“心”认识Vue（四）：组件的基本使用

最新推荐文章于 2024-04-02 17:54:20 发布

maya1024

最新推荐文章于 2024-04-02 17:54:20 发布

阅读量138

点赞数

分类专栏： vue 文章标签： vue vue.js html html5

本文链接：https://blog.csdn.net/high32/article/details/113093388

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

从“心”认识Vue（四）：组件的基本使用

前言
一、组件化是什么？
二、注册组件
- 1.使用步骤
- 2.步骤分析
三、全局组件与局部组件
- 1.全局组件
- 2.局部组件
总结
- 创建组件的步骤：
- 全局组件与局部组件

前言

学习vue的时候学完模板语法，上来就开始了脚手架，虽然上手快了点，但是感觉还是少了一点衔接，知识遇到了断层，于是自己就再补了一点，理解起来比较顺畅一些。

上篇文章：从“心”认识Vue（三）：再谈v-model

一、组件化是什么？

vue的核心思想就是数据驱动和组件化，组件化作为vue的重要思想，就是将页面分为多个组件，每个组件实现一个功能块，可以让我们的项目更方便的维护和管理，减少工作量，提高开发效率。
在这里插入图片描述

二、注册组件

1.使用步骤

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
<!--  3.使用组件-->
<!--  组件必须挂载在Vue实例下，否则不生效-->
  <comp></comp>
</div>

<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
  //1.创建组件构造器对象
  const comp = Vue.extend({
    template: `
       <div>
        <h2>我是标题</h2>
        <p>我是内容，哈哈</p>
       </div>`
  })
  //2.注册组件，第一个参数是注册组件标签名称，第二个参数是组件构造器
  Vue.component('comp',comp)

  new Vue({
    el: "#app",
    data: {

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

2.步骤分析

1.调用Vue.extend()方法创建了一个组件构造器，传入template写入要显示的html代码
2.调用Vue.component()方法注册了一个全局组件，并给它起组件的标签名称
3.组件必须挂载到Vue实例下

三、全局组件与局部组件

1.全局组件

上面的例子就是在用全局组件，全局组件的意思就是在本页面中所有的vue实例都可以使用这个组件。
如上面的例子，我再增加一个实例：

  <div id="app">
    <comp></comp>
  </div>

  <div id="app2">
    <comp></comp>
  </div>

再增加一个vue实例：

      const app2 = new Vue({
        el:"#app2"
      })

结果：
在这里插入图片描述

结果可以看到页面显示两个组件。

2.局部组件

顾名思义，局部组件将只能在某个vue实例下使用。

将上面的例子改成如下的代码：

      const app = new Vue({
        el:"#app",
        data:{

        },
        // 2.注册组件（局部组件），只能在本实例中使用
        components:{
          comp:comp
        }
      })
      const app2 = new Vue({
        el:"#app2"
      })

结果：
在这里插入图片描述
结果可以看到只显示出来一个组件，而app2的实例虽然挂载了comp的组件但是没有显示出来。

总结

创建组件的步骤：

1.调用Vue.extend()创建组件构造器；
2.调用Vue.component()注册组件，第一个参数是组件标签名称，第二个参数是组件；
3.将组件挂载到Vue实例下。

全局组件与局部组件

全局组件页面中所有vue实例都可以调用这个组件，语法是Vue.component(“组件标签名”,组件名)
局部组件只能在某个vue实例里使用这个组件，语法时在vue实例里与data，methods同级书写components:{组件标签名:组件}

maya1024

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
从“心”认识Vue（四）：组件的基本使用

从“心”认识Vue（四）：组件的基本使用前言一、组件化是什么？二、注册组件1.使用步骤2.步骤分析三、全局组件与局部组件1.全局组件2.局部组件总结创建组件的步骤：全局组件与局部组件前言学习vue的时候学完模板语法，上来就开始了脚手架，虽然上手快了点，但是感觉还是少了一点衔接，知识遇到了断层，于是自己就再补了一点，理解起来比较顺畅一些。一、组件化是什么？vue的核心思想就是数据驱动和组件化，组件化作为vue的重要思想，就是将页面分为多个组件，每个组件实现一个功能块，可以让我们的项目更方便的维护和
复制链接

扫一扫

专栏目录