vue中组件的3种使用方式详解


Posted in Javascript onMarch 23, 2019

前言

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

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

vue中组件的3种使用方式详解

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

vue中组件的3种使用方式详解

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

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

  • 基本组件
  • 全局组件
  • 构造组件

1. 基本组件四步骤

  • 写好组件(废话~)
  • 在页面种引用组件
  • 在components中声明组件
  • 在页面上使用

咱们以一个button子组件为例

项目src结构:

vue中组件的3种使用方式详解

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

1.写好子组件:

<template>
 <button class="btn" :style="{color:color}">
 <slot/> <!-- 插槽 -->
 </button>
</template>

<script>
export default {
 // 传入子组件的参数写到props
 props: {
 color: {
 type: String, // 颜色参数类型
 default: "#000" // 默认黑色
 }
 }
}
</script>

<style scoped>
 .btn {
 width: 110px;
 height: 60px;
 border-radius: 10px;
 border: none;
 font-size: 15px;
 }
</style>

2.3.4.父组件:

<template>
 <div id="app">
 <!-- 4. 在页面上使用 -->
 <Button color="red">我是插槽的值</Button>
 </div>
</template>

<script>
// 2. 在页面种引用组件
import Button from '@/components/Button.vue'
export default {
 name: "app",
 // 3. 在components中声明组件
 components: {
 Button
 }
};
</script>

效果:

vue中组件的3种使用方式详解

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:

<template>
 <div id="app">
 <!-- 5. 在页面上使用 -->
 <Button color="blue">我是全局按钮</Button>
 </div>
</template>

效果如下:

vue中组件的3种使用方式详解

2. 构造组件四步骤

  • 写好组件(还**是废话~)
  • vue.extend构建组件
  • 挂载 Vue.prototype
  • 在js中使用

1.写好子组件:

<template>
 <p class="Message">{{value}}</p>
</template>

<script>
export default {
 data() {
 return {
  value: "我是一个弹框"
 };
 }
};
</script>

<style>
.Message {
 position: fixed;
 bottom: 30px;
 width: 200px;
 background-color: rgba(0, 0, 0, 0.5);
 color: #fff;
 border-radius: 10px;
 left: 50%;
 transform: translateX(-50%);
 line-height: 30px;
 text-align: center;
 font-size: 15px;
 animation: messageFade 3s 1;
}
/* 加个简单动画 */
@keyframes messageFade {
 0% {
 opacity: 0;
 -webkit-transform: translate3d(-50%, 80%, 0);
 transform: translate3d(-50%, 80%, 0);
 }
 16% {
 opacity: 1;
 -webkit-transform: translate3d(-50%, 0, 0);
 transform: translate3d(-50%, 0, 0);
 }
 84% {
 opacity: 1;
 -webkit-transform: translate3d(-50%, 0, 0);
 transform: translate3d(-50%, 0, 0);
 }
 100% {
 opacity: 0;
 -webkit-transform: translate3d(-50%, 80%, 0);
 transform: translate3d(-50%, 80%, 0);
 }
}
</style>

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. 使用:

<template>
 <div id="app">
 <Button color="blue" @click.native="msg">我是全局按钮</Button>
 </div>
</template>

<script>
import Button from "@/components/Button.vue";
export default {
 name: "app",
 components: {
 Button
 },
 methods: {
 msg() {
  // 4. 使用构造组件
  this.$message({value:'我是构造组件'});
 }
 }
};
</script>

效果:

vue中组件的3种使用方式详解

以上就是三种组件的基本使用啦~~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
关于flash遮盖div浮动层的解决方法
Jul 17 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
May 28 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
jquery实现数字输入框
Feb 22 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
ES6入门教程之Array.from()方法
Mar 23 #Javascript
setTimeout与setInterval的区别浅析
Mar 23 #Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 #Javascript
vue中axios请求的封装实例代码
Mar 23 #Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 #Javascript
浅谈Angular单元测试总结
Mar 22 #Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 #Javascript
You might like
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
PHP代码加密的方法总结
2020/03/13 PHP
做网页的一些技巧(续)
2007/02/01 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
js选项卡的实现方法
2015/02/09 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
js通过classname来获取元素的方法
2016/11/24 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
深入剖析Node.js cluster模块
2018/05/23 Javascript
js取0-9随机取4个数不重复的数字代码实例
2019/03/27 Javascript
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Atom的python插件和常用插件说明
2018/07/08 Python
Python爬虫动态ip代理防止被封的方法
2019/07/07 Python
浅析使用Python搭建http服务器
2019/10/27 Python
python线程join方法原理解析
2020/02/11 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
python之随机数函数的实现示例
2020/12/30 Python
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
小学生开学第一课活动方案
2014/03/27 职场文书
2014年网络管理员工作总结
2014/12/01 职场文书
七年级作文之秋游
2019/10/21 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python