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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
javascript 动态table添加colspan\rowspan 参数的方法
Jul 25 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
jquery使整个div区域可以点击的方法
Jun 24 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
Bootstrap CDN和本地化环境搭建
Oct 26 Javascript
详解Node全局变量global模块
Sep 28 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
JavaScript EasyPager 分页函数
2011/05/25 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
JS实现轮播图效果
2020/01/11 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
pyqt4教程之widget使用示例分享
2014/03/07 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
深入浅析python 中的匿名函数
2018/05/21 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Python使用configparser库读取配置文件
2020/02/22 Python
如何使用repr调试python程序
2020/02/28 Python
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
公休请假条
2014/04/11 职场文书
婚前协议书范本
2014/04/15 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
英语邀请函范文
2015/02/02 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL