vue 用 js 呼叫公共元件

在 vue 專案中，對於公共元件的呼叫一般是 import 引入公共元件，然後在 components 中註冊元件，在頁面中以標籤的方式運用。

import msg from './msg'export 

default
,  ......
}

如果是用 js 呼叫呢？

export default

)    }
},......
}

實現：1、先寫好乙個元件：

//

msg.vue
if="isshow">msg component

2、新建乙個 js 檔案：

//

index.js
import vue from 'vue'import msg from './msg'const msgconstructor =vue.extend(msg)
const options =
},mounted() ,
methods: 
},watch: 
}}//options 內部同元件內部生命週期一樣，但元件內部優先執行
const instance = new
msgconstructor(options)
instance.$mount()
export 
default
function
install()

3、main.js 內引入：

//

main.js
//msg公共元件
import msg from '@/components'vue.use(msg)
vue.config.productiontip = false
newvue({
router,
4、頁面內用法：
<
template
>
<
div 
class
="hello"
>
<
button 
@click
="$msg.show()"
>show
button
>
<
button 
@click
="$msg.hide()"
>hide
button
>
div>
template
>

上面就完成了用純 js 來控制公共元件實現的步驟。

Vue公共元件呼叫，公共頭部實現自定義內容

一 設定公共頭部publicheader.vue sign 0 class head headtext 測試1 view view sign 1 class head headtext view view sign 2 class head headtext view view view templ...

vue封裝svgIcon公共元件

1 在components新建common svgicon.vue 2 在src下新建assets image icons svg用於存放.svg檔案 3 在src下新建assets image icons index.js import vue from vue import svgicon fr...

vue 全域性注入公共元件

在我們開發中有時候需要大量復用某個元件時，我們需要在某個元件都引入一遍，非常麻煩，這時候我們可以全域性注入這些元件。common 元件 div template export default script style plugins檔案下面的components.js檔案 import vue fr...