Vue.js 添加組件

本文轉載自查看原文 2016-03-31 14:08 2558 component/ js/ 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);
        
        // 創建根實例
        new Vue({
          el: '#example',
          methods:{
              cao:function(event){
                  alert(event.target.tagName);
              }
          }
        });
                    
        </script>
</body>
</html>

效果：

局部注冊

不需要全局注冊每個組件。可以讓組件只能用在其它組件內，用實例選項 components 注冊：

var Child = Vue.extend({ /* ... */ })

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue 動態添加組件 Vue全局添加組件或者模塊 VUE——添加組件模塊（圖表） vue2.0動態添加組件 Vue-全局添加組件 grafana添加組件 Vue.js組件使用Webstorm建立vue.js工程並添加vuetify組件 Vue.js路由組件 Vue.js之組件（component）