欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評論