快捷導(dǎo)航

Vue.js添加組件操作示例

更新時(shí)間：2018年06月13日 14:30:51 作者：wensongyu

這篇文章主要介紹了Vue.js添加組件操作,結(jié)合實(shí)例形式分析了vue.js組件的注冊(cè)、調(diào)用相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了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>'
    });
    // 注冊(cè)
    Vue.component('my-component', MyComponent);
    // 創(chuàng)建根實(shí)例
    new Vue({
     el: '#example',
     methods:{
       cao:function(event){
         alert(event.target.tagName);
       }
     }
    });
    </script>
</body>
</html>

效果：

局部注冊(cè)

不需要全局注冊(cè)每個(gè)組件。可以讓組件只能用在其它組件內(nèi)，用實(shí)例選項(xiàng) components 注冊(cè)：

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
 template: '...',
 components: {
  // <my-component> 只能用在父組件模板內(nèi)
  'my-component': Child
 }
})

希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

vue element動(dòng)態(tài)渲染、移除表單并添加驗(yàn)證的實(shí)現(xiàn)
這篇文章主要介紹了vue element動(dòng)態(tài)渲染、移除表單并添加驗(yàn)證的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
vue中$emit傳遞多個(gè)參(arguments和$event)
本文主要介紹了vue中$emit傳遞多個(gè)參(arguments和$event)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
Vue Echarts實(shí)現(xiàn)圖表的動(dòng)態(tài)適配以及如何優(yōu)化
這篇文章主要介紹了Vue Echarts實(shí)現(xiàn)圖表的動(dòng)態(tài)適配以及如何優(yōu)化，在實(shí)際的前端開發(fā)過(guò)程中，動(dòng)態(tài)適配是一個(gè)非常重要的問(wèn)題，在數(shù)據(jù)可視化的場(chǎng)景下，圖表的動(dòng)態(tài)適配尤為重要，需要的朋友可以參考下
2023-05-05
vue-cli中的webpack配置詳解
本篇文章主要介紹了vue-cli中的webpack配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
vue使用openlayers實(shí)現(xiàn)移動(dòng)點(diǎn)動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了vue使用openlayers實(shí)現(xiàn)移動(dòng)點(diǎn)動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
手把手教你如何在vue項(xiàng)目中使用rem布局
公司內(nèi)部一直有大屏的需求,也一直再做,中途也踩了一些坑,但是沒(méi)有認(rèn)真的來(lái)總結(jié)下,下面這篇文章主要給大家介紹了關(guān)于如何在vue項(xiàng)目中使用rem布局的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
vue項(xiàng)目本地開發(fā)完成后部署到服務(wù)器后報(bào)404錯(cuò)誤解決方案
很多時(shí)候我們發(fā)現(xiàn)辛辛苦苦寫的VueJs應(yīng)用經(jīng)過(guò)打包后在自己本地搭建的服務(wù)器上測(cè)試沒(méi)有什么問(wèn)題,但真正放在服務(wù)器上后會(huì)發(fā)現(xiàn)或多或少的問(wèn)題,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目本地開發(fā)完成后部署到服務(wù)器后報(bào)404錯(cuò)誤的解決方案,需要的朋友可以參考下
2024-01-01
vue-socket.io接收不到數(shù)據(jù)問(wèn)題的解決方法
這篇文章主要介紹了解決vue-socket.io接收不到數(shù)據(jù)問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
Vue3使用transition實(shí)現(xiàn)組件切換的過(guò)渡效果
<Transition> 是一個(gè)內(nèi)置組件,這意味著它在任意別的組件中都可以被使用,無(wú)需注冊(cè),它可以將進(jìn)入和離開動(dòng)畫應(yīng)用到通過(guò)默認(rèn)插槽傳遞給它的元素或組件上,本文介紹了Vue3使用transition實(shí)現(xiàn)組件切換的過(guò)渡效果,需要的朋友可以參考下
2024-09-09
VueX如何實(shí)現(xiàn)數(shù)據(jù)共享
這篇文章主要介紹了VueX如何實(shí)現(xiàn)數(shù)據(jù)共享問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-08-08