亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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è)組件?？梢宰尳M件只能用在其它組件內(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)文章

最新評(píng)論