Vue.js添加組件操作示例
更新時間：2018年06月13日 14:30:51 作者：wensongyu
這篇文章主要介紹了Vue.js添加組件操作,結(jié)合實例形式分析了vue.js組件的注冊、調(diào)用相關(guān)操作技巧,需要的朋友可以參考下
本文實例講述了Vue.js添加組件操作。分享給大家供大家參考，具體如下：
<!DOCTYPE HTML>
<html>
<head>
<title>vue.js hello world</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="example">
<my-component v-on:click="cao"></my-component>
</div>
<script>
// 定義
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
});
// 注冊
Vue.component('my-component', MyComponent);
// 創(chuàng)建根實例
new Vue({
el: '#example',
methods:{
cao:function(event){
alert(event.target.tagName);
}
}
});
</script>
</body>
</html>
效果：
局部注冊
不需要全局注冊每個組件?？梢宰尳M件只能用在其它組件內(nèi)，用實例選項 components 注冊：
var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
template: '...',
components: {
// <my-component> 只能用在父組件模板內(nèi)
'my-component': Child
}
})
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
vue element動態(tài)渲染、移除表單并添加驗證的實現(xiàn)
這篇文章主要介紹了vue element動態(tài)渲染、移除表單并添加驗證的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
vue中$emit傳遞多個參(arguments和$event)
本文主要介紹了vue中$emit傳遞多個參(arguments和$event)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
Vue Echarts實現(xiàn)圖表的動態(tài)適配以及如何優(yōu)化
這篇文章主要介紹了Vue Echarts實現(xiàn)圖表的動態(tài)適配以及如何優(yōu)化，在實際的前端開發(fā)過程中，動態(tài)適配是一個非常重要的問題，在數(shù)據(jù)可視化的場景下，圖表的動態(tài)適配尤為重要，需要的朋友可以參考下2023-05-05
本篇文章主要介紹了vue-cli中的webpack配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家詳細介紹了vue使用openlayers實現(xiàn)移動點動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
公司內(nèi)部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是沒有認真的來總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于如何在vue項目中使用rem布局的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-02-02
vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤解決方案
很多時候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過打包后在自己本地搭建的服務(wù)器上測試沒有什么問題,但真正放在服務(wù)器上后會發(fā)現(xiàn)或多或少的問題,這篇文章主要給大家介紹了關(guān)于vue項目本地開發(fā)完成后部署到服務(wù)器后報404錯誤的解決方案,需要的朋友可以參考下2024-01-01
vue-socket.io接收不到數(shù)據(jù)問題的解決方法
這篇文章主要介紹了解決vue-socket.io接收不到數(shù)據(jù)問題的解決方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vue3使用transition實現(xiàn)組件切換的過渡效果
<Transition> 是一個內(nèi)置組件,這意味著它在任意別的組件中都可以被使用,無需注冊,它可以將進入和離開動畫應(yīng)用到通過默認插槽傳遞給它的元素或組件上,本文介紹了Vue3使用transition實現(xiàn)組件切換的過渡效果,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了VueX如何實現(xiàn)數(shù)據(jù)共享問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08