vue中组件怎么用

这篇文章主要为大家展示了“vue中组件怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue中组件怎么用”这篇文章吧。

创新互联是一家以网络技术公司，为中小企业提供网站维护、做网站、成都网站制作、网站备案、服务器租用、国际域名空间、软件开发、微信小程序开发等企业互联网相关业务，是一家有着丰富的互联网运营推广经验的科技公司，有着多年的网站建站经验，致力于帮助中小企业在互联网让打出自已的品牌和口碑，让企业在互联网上打开一个面向全国乃至全球的业务窗口：建站来电联系：18980820575

前言

组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。

在vue angular react三大前端框架的大前端时代。许多人选择了vue，在 github 上的star，vue已经超过react的数量了。虽然star并不能代表vue更强，不过在发展速度上看来，vue确实很快。

在模块化的前端时代，万物皆组件，vue学习组件是必不可少的。

可是在大多数人熟悉了纯html、jq之后，在初次接触vue的组件时候，却是满脸蒙蔽。
今天咱们以最简单的方式，带vue小白童鞋们，步入组件的世界~

咱们今天讲三种组件使用方式

• 基本组件

• 全局组件

• 构造组件

1. 基本组件四步骤

• 写好组件（废话~）

• 在页面种引用组件

• 在components中声明组件

• 在页面上使用

咱们以一个button子组件为例

项目src结构：

组件一般都放在components文件夹下：

1.写好子组件：

 .btn {
 width: 110px;
 height: 60px;
 border-radius: 10px;
 border: none;
 font-size: 15px;
 }

2.3.4.父组件：

效果：

2. 全局组件五步骤

• 写好组件（还是废话~）

• 子组件添加install方法

• 在 main.js 中引用

• 使用 Vue.use 方法

• 在页面上使用

1.子组件还是那样~~：

2. 子组件添加install方法

Button.js :

import ButtonComponent from './Button.vue'

// 添加install方法 （插件方法）
const Button = {
 install: function (Vue) {
 Vue.component("Button", ButtonComponent);
 }
}

// 导出Button
export default Button

当然 你可以处理多个全局组件：

import ButtonComponent1 from './Button1.vue'
import ButtonComponent2 from './Button2.vue'
import ButtonComponent3 from './Button3.vue'

const buttonList = [
 ButtonComponent1,
 ButtonComponent2,
 ButtonComponent3
];
// 添加install方法 （插件方法）
const Button = {
 install: function (Vue) {
 buttonList.forEach(button=>{
 // 这里 使用每个组件的 name 属性作为组件名
 Vue.component(button.name, button);
 })
 }
}

// 导出Button
export default Button

3.4. main.js

import Vue from 'vue'
import App from './App.vue'
// 3
import Button from '@/components/Button.js'
// 4
Vue.use(Button);
new Vue({
 render: h => h(App),
}).$mount('#app')

5. 在页面上使用
app.vue:

效果如下：

2. 构造组件四步骤

• 写好组件（还**是废话~）

• vue.extend构建组件

• 挂载 Vue.prototype

• 在js中使用

1.写好子组件：

2. vue.extend构建组件

Message.js :

import Vue from 'vue';
import Message from './Message.vue';
// 构造组件
const MessageConstructor = Vue.extend(Message);
// 设置删除组件
const removeDom = (target) => {
 target.parentNode.removeChild(target);
};
// 构造组件添加关闭方法
MessageConstructor.prototype.close = function() {
 this.visible = false;
 removeDom(this.$el);
};

const MessageDiv = (options) => {
 // 实例化组件
 const instance = new MessageConstructor({
  el: document.createElement('div'),
  // 组件参数，运用到组件内的data
  data: options,
 });
 // 在body添加组件
 document.body.appendChild(instance.$el);
 Vue.nextTick(() => {
  instance.timer = setTimeout(() => {
   // 定时关闭组件
   instance.close();
  }, 3000);
 });
 return instance;
};

export default MessageDiv;

3. 挂载 Vue.prototype

main.js :

import Message from '@/components/Message.js'
Vue.prototype.$message = Message;

4. 使用：

效果：

以上是“vue中组件怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！