Vue 局部注册demo

demo:


    <div id="part-component">
      <component-a></component-a>
      <componentb></componentb>
    </div>

script:

var ComponentA = {
        data: function() {
          return {
            msg: "我是局部注册component-a"
          };
        },
        methods: {
          say: function() {
            alert("Hi");
          }
        },
        template: ` <button v-on:click="say"> {{ msg }}  </button> `
      };
      var componentb = {
        template: ` <span>我是局部注册component-b  </span> `
      }
      new Vue({
        el: "#part-component",
        components: {
          "component-a": ComponentA,
          componentb
        }
      });


下面是官网的：
在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
然后在 components 选项中定义你想要使用的组件：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})
对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}
或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA
  },
  // ...
}
注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

用在模板中的自定义元素的名称
包含了这个组件选项的变量名