vue如何在main.js中配置全局的通用公共组件
作者:牛先森家的牛奶
这篇文章主要介绍了vue如何在main.js中配置全局的通用公共组件问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
在main.js中配置全局的通用公共组件
1、在main.js中直接引入并注册
main.js引入并注册
import Loading from './components/Loading.vue'; Vue.component('Loading', Loading);
2、页面中使用组件
html中使用:
<template> <div class='wrapper'> <Loading :ready="ready"></Loading> </div> </template> export default { name: "index", data() { return { ready: false, }; }, created() { // 这里是为了模拟改loading的显示和隐藏用的函数 setTimeout(() => { this.ready = true }, 3000); }, computed: {}, methods: { }, }; </script>
vue.js全局组件的三种方式
组件:button imageview listview等这些都是AS系统提供给我们
使用的组件;前端也有像类似于后端的组件概念。
组件的语法格式:
全局组件
Vue.component(‘组件名’,{代码的定义})
1.组件名称:
- 羊肉串法:my-comp-name ->
- 骆驼/pascal法: orderItem- 或
2.代码的定义
- 2.1 template:‘HTML代码’
- 2.2 template: 多行代码,反引号,是ECMAScript6之后提供给我们的符号;
- 2.3 template:外部定义的方式;
三种方式定义分别如下:
第一种方式,单引号(或双引号)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>全局组件</title> <script src="../vue.js"></script> </head> <!-- 做下第一个组件的案例,后续前后端 开发会用到! --> <body> <div id="app"> <h3>{{msg}}</h3> <order-item></order-item> </div> <script> //1.需要针对order-item这个组件做一个定义,之前没有定义的; Vue.component('order-item', { template: '<ul><li>今天愚人节上课</li></ul>' } ); let vm = new Vue({ el: '#app', data: { msg: '全局组件的定义!' } }); </script> </body> </html>
第二种方式反引号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <order-item></order-item> </div> <div id="app1"> <order-item></order-item> </div> <script> //1.定义组件; Vue.component('order-item', { template: ` <div> <h1>反引号的全局组件</h1> <p>京东特卖<p> <ul><li>LV包包</li><li>GuCCI</li></ul> </div> ` }) //2.绑定 new Vue({ el: '#app' }); new Vue({ el: '#app1' }); </script> </body> </html>
第三种方式外部ID
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue.js"></script> </head> <body> <div id="app"> <btn-counter></btn-counter> </div> <template id="btn-counter"> <button @click="add">单击{{count}}次</button> </template> <script> //1.全局组件的定义;做个小作业做下测试;涵盖了:组件 data methods三种方式; Vue.component('btn-counter', { template: '#btn-counter', data: function () { return { count: 0 } }, methods: { add: function () { this.count++ } } }) //2.绑定; let vm1 = new Vue({ el: '#app' }); </script> </body> </html>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。