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>

效果：

Vue.js 添加组件

局部注册

不需要全局注册每个组件。可以让组件只能用在其它组件内，用实例选项 components 注册：

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

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