（24）Vue.js组件—组件注册

已于 2023-11-13 13:39:05 修改
阅读量572 收藏
点赞数
分类专栏： Vue 文章标签： vue.js
于 2022-02-12 20:41:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36213140/article/details/122895928
版权

一、Vue.js组件注册内容

• 全局注册 • 组件基础 • 局部注册

二、全局注册

• 全局注册的组件在注册后可以用于任意实例或组件中。

<body>
  <div id="app">
    <p>这是p标签</p>
    <my-component></my-component>
  </div>
  <script src="./vue.js"></script>
  <script>
    // 语法:  Vue.component('my-component',{选项对象});
    Vue.component('my-component',{
      template: '<div>这是我们全局注册的组件</div>'
     })
    new Vue({
      el:'#app',
      data: {

      }
    })
  </script>
</body>

• 注意：全局注册必须设置在根 Vue 实例创建之前。

三、组件基础

• 本质上，组件是可复用的 Vue 实例，所以它们可与 new Vue 接收相同的选项，例如 data、methods 以及生命周期钩子等。
• 仅有的例外是像 el 这样根实例特有的选项。

组件基础主要学习内容：• 组件命名规则 • template 选项 • data 选项

3.1组件命名规则

• 组件具有两种命名规则：
• kebab-case：'my-component’  驼峰命名法
• PascalCase：'MyComponent'  帕斯卡命名法

• 注意：无论采用哪种命名方式，在 DOM 中都只有 kebab-case 可以使用。

示例：我们再视图中使用组件的时候，不能够使用帕斯卡命名法去书写，否则会报错。

<body>
  <div id="app">
    <my-com-a></my-com-a>
    <!-- <MyComA></MyComA> -->
    <my-com-b></my-com-b>
    <!-- <MyComB></MyComB> -->
  </div>
  <script src="../01.TodoMVC/todomvc-app-template/node_modules/vue/dist/vue.js"></script>
  <script>
    //kebab-case进行注册 （驼峰命名法）
    Vue.component('my-com-a', {
      template: '<div>这是a组件的内容</div>'
    })
    //pascalCase进行注册 （帕斯卡命名法）
    Vue.component('MyComB', {
      template: '<div>这是b组件的内容</div>'
    })
    new Vue({
      el: '#app'
    })
  </script>
</body>

 3.2template选项

• template 选项用于设置组件的结构，最终被引入根实例或其他组件中。

• 注意：组件必须只有一个根元素。如果出现同级的根元素就会出现报错情况。

<body>
  <!-- 挂载元素 -->
  <div id="app">
    <my-com-a></my-com-a>
  </div>
  <script src="../01.TodoMVC/todomvc-app-template/node_modules/vue/dist/vue.js"></script>
  <script>
    Vue.component('MyComA', {
      template: `
        <div>
          <h1>组件 A 的标题内容</h1>
        </div>
        <div>
          <h1>组件 A 的标题内容</h1>
        </div>
      `
    });
    new Vue({
      el: '#app'
    })
  </script>
</body>

3.3data选项

• data 选项用于存储组件的数据，与根实例不同，组件的 data 选项必须为函数，数据设置在返回值对象中。

<body>
  <!-- 挂载元素 -->
  <div id="app">
    <my-com-a></my-com-a>
    <my-com-a></my-com-a>
    <my-com-a></my-com-a>
  </div>
  <script src="../01.TodoMVC/todomvc-app-template/node_modules/vue/dist/vue.js"></script>
  <script>
    Vue.component('MyComA',{
      template: `
      <div>
        <h3> {{ title }} </h3>
        <p>  {{content}}  </p>
      </div>
      `,
      // data() {} 简写形式
      data: function () {
        return {
          title: '这是组件A的标题',
          content: '这是组件A的内容'
        }
      }
    });
    new Vue({
      el: '#app',
      data: {

      }
    })
  </script>
</body>

data参数使用函数的实现方式，是为了确保每个组件实例可以维护一份被返回对象的独立的拷贝，不会相互影响。

通过如下使用DevTools插件，我们可以选择一个组件进行数据修改，发现我们多次调用的组件，再修改的时候，只会更改自身选中的组件，其他的同名的组件不会随之变化，受到影响。

四、局部注册

• 局部注册的组件只能用在当前实例或组件中。

<body>
  <div id="app">
    <my-com-a></my-com-a>
    <my-com-b></my-com-b>
  </div>
  <script src="vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {

      },
      components: {
        'my-com-a': {
          templata: `
            <div>
              <h3>{{ title }}</h3>
              <p>{{ content }}</p>
            </div>
          `,
          data: function () {
            return {
              title: '这是组件A的标题',
              content: '这是组件A的内容'
            }
          }
        },
        'my-com-b': {
          templata: `
            <div>
              <h3>{{ title }}</h3>
              <p>{{ content }}</p>
            </div>
          `,
          data: function () {
            return {
              title: '这是组件B的标题',
              content: '这是组件B的内容'
            }
          }
        }
      }
    })
  </script>
</body>

单独配置组件的选项对象：

<body>
  <div id="app">
    <my-com-a></my-com-a>
    <my-com-b></my-com-b>
  </div>
  <script src="vue.js"></script>
  <script>
    let MyComA = {
          templata: `
            <div>
              <h3>{{ title }}</h3>
              <p>{{ content }}</p>
            </div>
          `,
          data: function () {
            return {
              title: '这是组件A的标题',
              content: '这是组件A的内容'
            }
          }
        };
    let MyComB =  {
          templata: `
            <div>
              <h3>{{ title }}</h3>
              <p>{{ content }}</p>
            </div>
          `,
          data: function () {
            return {
              title: '这是组件B的标题',
              content: '这是组件B的内容'
            }
          }
        };
    new Vue({
      el: '#app',
      data: {

      },
      components: {
        'my-com-a': MyComA,
        'my-com-b': MyComB
      }
    })
  </script>
</body>

ES6 的对象属性简写： 

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

      },
      components: {
        MyComA,
        MyComB
      }
    })
泽哥ins
关注
专栏目录
Vue.js 组件精讲（目前已有6614人一起学习）
sybh的博客
10-21 542
iView 作者 3 年的 Vue.js 组件开源积累，Vue.js 组件知识深入剖析 创始人 @ 视图更新科技
Vue.js组件注册
wunianisme的博客
04-05 327
组件是Vue.js最推崇的，也是最强大的功能之一，核心目标是为了可重用性高，减少重复性的开发。 组件有两种注册方式：全局注册和局部注册。 全局注册 Vue.component('my-component',MyComponent) 如上所示，第一个参数是注册组件的名称（在HTML中可以使用组件：</my-component）；第二个参数是组件的构造函数，它可以是Function，也可以是O...
Vue.js之组件注册
weixin_44827643的博客
07-18 582
本文主要介绍Vue.js中组件的注册使用，包括组件的全局和局部注册。
Vue.js组件-组件注册
qq_41049094的博客
03-07 306
今天开始复习组件的相关内容。 组件的概念 组件用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装为整体 提高功能复用性与可维护性，更好的专注于业务逻辑 组件使用时为自定义HTML标签形式，通过组件名作为自定义标签名 组件注册 全局注册 全局注册的组件在注册后可以用于任意实例或组件中：Vue.component('组件名',{选项对象}); 注意：全局注册必须设置在根Vue实例创建之前 组件基础 本质上，组件是可复用的Vue实例，所以它们可与new Vue接收相同的选项，例如data、meth
VueJs(8)---组件（注册组件）
a8892117的博客
05-05 183
组件（注册组件） 一、介绍 组件系统是Vue.js其中一个重要的概念，它提供了一种抽象，让我们可以使用独立可复用的小组件来构建大型应用，任意类型的应用界面都可以抽象为一个组件树 那么什么是组件呢？ 组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。 二、如何注册组件 Vue.js的组件的使...
vue.global.js，Vue.js 框架的核心文件之一
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
VueGL-Vue.js组件通过three.jsReact性渲染3D图形-Vue.js开发
05-27
Vue.js是一个流行的前端JavaScript框架，它以组件化、易学习、高性能著称。VueGL通过结合Vue.js的组件系统和three.js的3D图形处理能力，使得开发者能够轻松地在Vue应用中构建3D图形。three.js是一个广泛使用的...
vue-grd-简单，轻巧和灵活的Vue.js组件，用于网格布局。-Vue.js开发
05-27
vue-grd简单，轻巧和灵活的Vue.js组件，用于网格布局。 Vue.js grd的端口。 安装npm install --save vue-grd用法可以使用<vue-grd简单，轻巧和灵活的Vue.js组件进行网格布局。 Vue.js grd的端口。 安装npm ...
vue-flatpickr组件flatpickrvue-flatpickr组件Flatpickr日期时间选择器的Vue.js组件-Vue.js开发
05-27
Vue FlatPickr组件Flatpickr日期时间选择器演示或JSFiddle功能的Vue.js组件vactive model模型值您可以更改flatpickr值Vue FlatPickr组件Flatpickr日期时间选择器演示或JSFiddle功能的Vue.js组件演示vactive v模型值...
vuejs学习之组件注册
qq_36836277的博客
03-21 333
官方网站 https://cn.vuejs.org/ 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的： Vue.component('my-component-name', { // ... options ... }) 全局注册的组件可以用在其被注册之后的任何 (...
vuejs官方文档之组件注册
飞鸿的博客
08-15 685
组件名 在注册一个组件的时候，我们始终需要给他一个名字，比如在全局注册的时候我们已经看到了 Vue.component('****',{*******}) 该组件名就是Vue,component的第一个参数。 你给予组件的名字可能依赖于你打算拿他来做什么，当直接在dom中使用一个组件（而不是在字符串模板或单文件组件）的时候，我们强烈推荐遵循w3c规范中的自定义组件名（字母全小写且必须包含一...
前端框架vue.js的组件注册基础
weixin_43165064的博客
06-18 280
vue 组件注册 var MyComponent = Vue.extend({}); 此时得到一个组件构造器，但还无法直接使用，需要将组件注册到应用中。注册方式分为全局注册和局部注册 1 全局注册 需要注意全局注册在根实例初始化之前注册 方式如下： Vue.component('my-component',MyConponent); 这条语句要在var vm= new Vue({ })之前，注册成功之后就可以以<my-component> 的形式使用组件。 命名规范建议使用小写字母加“-”。
vue 注册插件
m0_63327154的博客
07-20 559
代码】vue注册插件。
vue-组件注册及使用
唯见青山不见君
11-13 2080
vue-组件注册及使用
基于Vue.js完善注册页面
weixin_43823753的博客
06-02 1325
上一篇文章:基于Spring Boot实现邮箱获取验证码进行注册(链接:点击跳转) 之前那篇博客留了一点坑没填,这篇换了前端js框架来解决一些坑点 下面是用Vue.js重构的前端代码,Vue实体化的对象的第一个参数el后面跟的是要绑定的div的id,因此需要给需要绑定数据的html代码外面套上div标签,并设置id,然后再el后面填上该id来绑定,然后紧跟着的data里面填的是与html里面绑定的数据,再input标签里加上v-model可以让该input标签和该Vue里的对象的值双向绑定(即改变一边的值,
自定义插件并注册
qq_46034942的博客
05-06 486
1.在自制插件之前，先来看一下Vue官网插件的原理 安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。该方法需要在调用 new Vue() 之前被调用，不需手动调用。
Vue 基础学习（3）：组件注册、组件间数据交互、组件插槽
icemwj的博客
09-26 287
Vue 基础学习（3）：组件注册、组件间数据交互、组件插槽
Vue3全家桶 - Vue3 - 【6】组件（注册组件 + 组件通信 + 透传属性和事件 + 插槽 + 单文件CSS + 依赖注入）
最新发布
qq_48937489的博客
03-11 1028
组件 一、 注册组件 1.1 ❌ 全局注册 目标文件：main.js； 语法：import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) // 全局注册 app.component('组件名字', 需要注册组件) app.mount('#app') 缺陷： 全局注册，但并没有被使用的组件无法生产打包时被自动移除（也叫tree-shaking）。如果，你全局注册了一个组件，即使它并没有
Vue.js组件注册与使用深度解析
"Vue.js组件的使用方法，包括创建组件构造器、全局和局部注册以及在Vue实例中使用组件的示例" Vue.js中的组件是构建应用程序的核心元素，它们允许开发者将复杂的应用拆分为可复用的小部分，提高了代码的可维护性和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

泽哥ins

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值