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

网络编程 2024/11/16 佚名

3 2 1

鸳鸯亭资源网 Design By www.gvabc.com

前言

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

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

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

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

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

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

1. 基本组件四步骤

写好组件（废话~）
在页面种引用组件
在components中声明组件
在页面上使用

咱们以一个button子组件为例

项目src结构：

组件一般都放在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>

效果：

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>

效果如下：

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组件方式,vue定义组件方式,vue组件使用

标签：

vue组件方式,vue定义组件方式,vue组件使用

鸳鸯亭资源网 Design By www.gvabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

鸳鸯亭资源网 Design By www.gvabc.com

评论“vue中组件的3种使用方式详解”

暂无评论...

www.gvabc.com 鸳鸯亭资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

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

vue组件方式,vue定义组件方式,vue组件使用

如何在Angular应用中创建包含组件方法示例

ES6入门教程之Array.from()方法

评论“vue中组件的3种使用方式详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

vue组件方式,vue定义组件方式,vue组件使用

如何在Angular应用中创建包含组件方法示例

ES6入门教程之Array.from()方法

评论“vue中组件的3种使用方式详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存