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文件中使用，但是不太安全，而且會增大文件體積

局部組件：使用之前需要注冊