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

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>

WEB前端:vuejs全家桶(37):自定义全局组件(插件)

上一篇: 微信登录小程序

下一篇: