vue全局组件注册、局部组件注册、全局方法注册

一、全局组件注册有两种方法：

1、在main.js文件中引入组件：

import UserData from './components/UserData.vue' vue.component('UserData',UserData)

就可以直接在vue文件中使用

<user-data></user-data>

2、新建一个userdata目录 下面有一个index.vue和index.js文件

index.vue文件 是常规的vue文件

index.js文件注册该组件：

import index from './index.vue' const indexLists = { install: function(Vue) { // 注册并获取组件，然后在main.js中引用，在Vue.use()就可以了 Vue.component('indexLists', index) } } export default indexLists

在main.js使用并注册：

import userdata from '@/components/index.js' Vue.use(userdata);

 

二、局部组件注册：

<template> <div> //组件使用 <user-data></user-data> </div> </template> <script> import UserData from './components/UserData.vue' // 组件引入 export default { name:'test', components:{ UserData //组件注册 } } </script>

佛山vi设计https://www.houdianzi.com/fsvi/ 豌豆资源搜索大全https://55wd.com

三：全局方法注册：

在目录下面建立一哥common.js文件：

const obj={
    fun(){
     console.log('hello word') } } export default obj import comm form './common.js' Vue.protopyte.$common = comm this.$common.fun1() // hello word

全局组件：注册之后可以直接在vue文件中使用，但是不太安全，而且会增大文件体积

局部组件：使用之前需要注册