组件-局部注册

男娘i 2022-03-30 10:20 270阅读 0赞

**选项/资源 Components**，包含 Vue 实例可用组件的哈希表。类型是object

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

然后在 `components` 选项中定义你想要使用的组件：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

对于 `components` 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

注意**局部注册的组件在其子组件中*不可用***。例如，如果你希望 `ComponentA` 在 `ComponentB` 中可用，则你需要这样写：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

<table> 
 <tbody> 
  <tr> 
   <td> <pre><code>import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}
</code></pre> </td> 
  </tr> 
 </tbody> 
</table>

注意在 ES2015+ 中，在对象中放一个类似 `ComponentA` 的变量名其实是 `ComponentA: ComponentA` 的缩写，即这个变量名同时是：

*  用在模板中的自定义元素的名称
 *  包含了这个组件选项的变量名

发表评论取消回复

表情：

评论列表（有 0 条评论，270人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue局部注册组件实现组件化登录注册

Vue局部注册组件实现组件化登录注册一、效果二、代码 1、index.js 2、App.vue 3、首页

痛定思痛。/ 2024年04月06日 15:28/ 0 赞/ 122 阅读

相关 Vue的组件(注册、局部、组件复用、props、emit、生命周期)全解

文章目录前言知识点组件注册局部组件组件复用组件间通信 props 类型检测

╰半夏微凉°/ 2024年03月26日 15:23/ 0 赞/ 82 阅读

相关 25 创建局部组件、组测局部组件、组件命名法

\[组件\]Vue3中的局部组件阐述新建文件创建局部组件组测局部组件局部组件使用大驼峰命名法完整代码阐述和全局

矫情吗；*/ 2023年10月06日 20:35/ 0 赞/ 14 阅读

相关 Vue全局组件与局部组件

全局注册组件，组件在注册之后可以用在任何新创建的 Vue 根实例的模板中使用，局部注册的组件只能在指定父组件下使用，作用域小。 <template> <d

Myth丶恋晨/ 2023年08月17日 16:00/ 0 赞/ 139 阅读

相关 Vue3---组件注册(全局组件、局部组件)

全局组件通过 app.component() 方式注册 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_

Love The Way You Lie/ 2023年01月20日 08:11/ 0 赞/ 885 阅读

相关 vue 局部组件

vue 局部组件小案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

淩亂°似流年/ 2022年12月02日 15:04/ 0 赞/ 222 阅读

相关 vue注册组件跟注册局部组件

vue注册组件跟注册局部组件 > 由于以前都是用脚手架写的项目，因此常常忽略了这一点，由于最近入驻的公司是关于直播广告活动的，因此都是基于vue.js写出的项目，废话不多

红太狼/ 2022年11月09日 14:22/ 0 赞/ 224 阅读

相关全局组件和局部组件

<!DOCTYPE html> <html> <head> <title></title> <script type="text/j

曾经终败给现在/ 2022年06月02日 10:23/ 0 赞/ 266 阅读

相关组件-局部注册

选项/资源 Components，包含 Vue 实例可用组件的哈希表。类型是object 在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件： <ta

男娘i/ 2022年03月30日 10:20/ 0 赞/ 271 阅读

相关 Vue.js--组件注册（全局注册、局部注册）、表行组件、组件中的data、组件数据的共享问题详解

组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，

我就是我/ 2021年08月13日 23:19/ 0 赞/ 494 阅读