WEB前端:vuejs全家桶(37):自定义全局组件(插件)
程序员文章站
2024-02-11 16:36:22
...
三、 自定义全局组件(插件)
全局组件(插件):就是指可以在main.js中使用Vue.use()进行全局引入,
然后在其他组件中就都可以使用了,如vue-router
import VueRouter from 'vue-router'
Vue.use(VueRouter);
普通组件(插件):每次使用时都要引入,如axios
import axios from 'axios'
文档
https://cn.vuejs.org/v2/guide/plugins.html
操作:
第1步:在src下新建components目录,在components目录下新建user目录,
在user目录下新建Login.vue,在Login.vue中添加组件内容
第2步:在user目录下新建index.js,注册Login.vue
第3步:在main.js注册Login.vue
第4步:在App.vue的<template>使用Login插件
Login.vue
<template>
<div id="login">
{{msg}}
</div>
</template>
<script>
export default {
data(){
return {
msg:'用户登陆'
}
}
}
</script>
<style scoped>
#login{
color:red;
font-size:20px;
text-shadow:2px 2px 5px #000;
}
</style>
index.js
import Login from './Login.vue'
export default {
install: function(Vue) {
Vue.component('Login', Login);
}
}
main.js
import Vue from 'vue'
import App from './App.vue'
import Login from './components/user'
Vue.use(Login);
new Vue({
el: '#app',
render: h => h(App)
})
App.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
<Login></Login>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
上一篇: 微信登录小程序