vue官方文档（13）组件的局部注册

在创建Vue实例时，使用Components属性，在其中来定义局部注册的组件，有以下几种方式：
1.使用js对象来定义组件，然后在Components属性中引用
2.直接在Components属性中使用模板来定义组件
3.在其它vue实例中定义组件，然后将其包含在Components属性中

<template>
  <div >
<local-component></local-component>
<test></test>
<test2></test2>
</div>


</template>


<script>

// eslint-disable-next-line
//import { Lazyload } from 'vant';
//import {Toast} from 'vant';
//import {Notify} from 'vant'
import LocalComponent from "./LocalComponent.vue"

let jsObject = {
  template: "<div><h3>this is a component defined by js object </h3><button @click='clickIt'>click</button></div>",
  methods: {
    clickIt(){
      alert("button clicked!");
    }

  }
}



export default {
  components: {
    LocalComponent,
     test: {
      template: `<h3>this is a local component defined by using template directly</h3>`
    },
    test2: jsObject
  },
  data() {
    return {
      
    };
  },
    mounted() {
   
  },
  methods: {
    
  },
};
</script>

<style >
  

</style>

LocalComponent组件的定义如下：

<template>
    <h1>this is a local component</h1>
</template>
<script>

export default {
  name: "LocalComponent"
}
</script>