Vue注册组件的几种方式,你都知道吗?

Posted 2023-04-03 稗子酒

在开发中,经常需要将业务进行组件化,我们就需要去注册组件,下面列举几种常用的注册组件的方法

• 局部注册组件

1.首先需要将要注册的组件进行引入

2.在script标签中进行注册,注意:组件注册的名字和引入的名字需要保持一致即可进行简写

 3.在template标签中以html的标签格式进行使用

• 全局注册组件 

1.全局入口在main.js, 在new Vue之上注册

 

2. 将要注册的组件进行引入

3. 全局 - 注册组件 语法:Vue.component("组件名", 组件对象) 

 

4. 在template标签中以html的标签格式进行使用

• 使用Vue.use()来注册组件 

• 实现的原理：

1. 1-需要传入一个参数：对象||函数
2. 2-对象中提供了一个install函数
3. 3-install函数有一个参数接受的是Vue

1. 在公共components文件的index.js中导出需要注册的组件

2.在公共components文件的index.js中导出需要注册的组件

3.在入口文件main.js中使用vue.use()进行注册

 

 如果使用的是函数的方法去注册的话 只需要将第一步进行修改即可

 

• 搭配webpack来批量注册组件 

1. 在公共components文件的index.js中导出需要注册的组件

 2.在入口文件main.js中使用vue.use()进行注册

 

注释:

使用这种方法去注册全局公共组件 可以减少一部分代码量和重复的导入与注册 一次注册 多次使用但是需要注意的是每一个组件的name都必须有 否则就会出现组件注册不了的情况 

 

将多个属性传递给 Vue 组件的几种方式

所有使用基于组件的体系结构(如vue和react)的开发人员都知道，创建可重用组件是很困难的，而且大多数情况下，最终会通过传入大量的属性，以便从外部更容易地控制和自定义组件。这并不坏，但是传递大量属性确实会变得有点麻烦和丑陋。

我们以 vuetify 的按钮组件为例，它是最简单的组件之一。假设我们想要在大多数情况下传递相同的属性：

<v-btn
  color=‘primary‘
  href=‘https://alligator.io‘
  small
  outline
  block
  ripple
>
  Hello Meat
</v-btn>

将它们放在单独的文件中是有意义的，这个文件我们取名为props.js

export const buttonProps = {
  color: ‘primary‘,
  small: true,
  outline: true,
  block: true,
  ripple: true,
  href: ‘https://alligator.io‘
}

 

jsX 和 render 函数

由于JSX 和 render 函数在渲染时为我们提供了更多的功能和灵活性，所以一次传递多个属性是相当容易的。

在 render 函数中：

import { buttonProps as props } from ‘./props.js‘;
export default {
render: h => h(
‘v-btn‘,
{ props },
‘Hello Meat‘
)
};

在 JSX 中：

import { buttonProps as props } from ‘./props.js‘;

const data = { props }

export default {
  render: h => <v-btn {...data}>Hello Meat</v-btn>
};

 

使用 vue.js 模板

使用Vue template怎么样？不用担心，那也是可能的。我们所需要做的就是使用v-bind指令。对于必须在组件的data选项中定义的对象，它将绑定所有属性

<template>
  <v-btn v-bind=‘buttonProps‘>
    Hello Meat
  </v-btn>
</template>

<script>
  import { buttonProps } from ‘./props.js‘;

  export default {
    data: () => ({ buttonProps })
  }
</script>

使用此技巧，我们无需在应用中的多个位置填充重复属性的模板，同时仍然可以使用受欢迎的模板标记。

广州包装设计公司http://www.maiqicn.com 电脑刺绣绣花厂 ttp://www.szhdn.com

总结

使用本文中提到的示例，可以简化将多个属性传递给组件的操作。 这对于具有很多属性的表示性和第三方组件特别有用。

注意，这里使用的示例仅仅演示。如果想制作更加灵活可用的，可以根据具体情况使用更好的方法，例如创建自己的包装器组件。