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 相关文章推荐
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 Javascript
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
微信小程序开发之实现自定义Toast弹框
Jun 08 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
token 机制和实现方式
Dec 15 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调用Oracle存储过程
2006/10/09 PHP
phpMyAdmin 安装教程全攻略
2007/03/19 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
JQuery 1.4 中的Ajax问题
2010/01/23 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
简介JavaScript中setUTCSeconds()方法的使用
2015/06/12 Javascript
KnockoutJs快速入门教程
2016/05/16 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
Angular中的$watch、$watchGroup、$watchCollection
2017/06/25 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
2019/05/05 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
详解Node.JS模块 process
2020/08/31 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
基于python 凸包问题的解决
2020/04/16 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
英国时尚优质的女装:Hope Fashion
2018/08/14 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
实习教师自我鉴定
2013/12/12 职场文书
留学推荐信英文范文
2015/03/26 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
导游词之张家口
2019/12/13 职场文书
详解Flutter网络请求Dio库的使用及封装
2022/04/14 Java/Android