WEB前端：vuejs全家桶（37）：自定义全局组件（插件）

最新推荐文章于 2023-01-02 22:43:27 发布

原创最新推荐文章于 2023-01-02 22:43:27 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vuejs

vuejs 专栏收录该内容

40 篇文章

订阅专栏

本文详细介绍如何在Vue项目中创建和使用全局组件，包括步骤说明和代码示例，展示如何通过Vue.use()在main.js中注册组件，以便在项目中任何地方调用。

三、自定义全局组件（插件）

全局组件（插件）：就是指可以在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>