欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-06 08:02:21
前言 组件是vue.js最强大的功能之一。组件可以扩展html元素,封装可重用的代码。 在vue angular react三大前端框架的大前端时代。许多人选择了vue...

前言

组件是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种使用方式详解

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

总结

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