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开发随笔二 动态加载js和文件
Nov 25 Javascript
用jquery模仿的a的title属性的例子
Oct 22 Javascript
js中日期的加减法
May 06 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
基于jQuery实现表格的排序
Dec 02 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
angularjs中的$eval方法详解
Apr 24 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
VSCode搭建React Native环境
May 07 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
php实现12306火车票余票查询和价格查询(12306火车票查询)
2014/01/14 PHP
php 将json格式数据转换成数组的方法
2018/08/21 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
JavaScript比较当前时间是否在指定时间段内的方法
2016/08/02 Javascript
Ajax与服务器(JSON)通信实例代码
2016/11/05 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
2017/05/15 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
使用JavaScript获取Django模板指定键值数据
2020/05/27 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
[02:45]2016年中国刀塔全程回顾,完美“圣”典即将上演
2016/12/15 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
详解Python中time()方法的使用的教程
2015/05/22 Python
python实现数据库跨服务器迁移
2018/04/12 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
python如何生成网页验证码
2018/07/28 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
python list转置和前后反转的例子
2019/08/26 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
岗位廉政承诺书
2014/03/27 职场文书
企业安全生产承诺书
2014/05/22 职场文书
2014年维稳工作总结
2014/11/18 职场文书
2014年体育工作总结
2014/11/24 职场文书
2015年组织部工作总结
2015/04/03 职场文书
门店店长岗位职责
2015/04/14 职场文书
质量承诺书格式范文
2015/04/28 职场文书
论文答辩开场白大全
2015/05/27 职场文书
【海涛解说】pis亲自推荐,其实你从来不会玩NW
2022/04/01 DOTA
win10如何开启ahci模式?win10开启ahci模式详细操作教程
2022/07/23 数码科技