Vue全局组件与局部组件

       全局注册组件，组件在注册之后可以用在任何新创建的 Vue 根实例的模板中使用，局部注册的组件只能在指定父组件下使用，作用域小。

<template>
  <div id="app">
    <div>
      <div>{{msg}}</div>
      <child-one></child-one>
      <child-two> </child-two>
      <global-component></global-component>
    </div>
    <global-component></global-component>
  </div>
</template>

<script>
  import Vue from 'vue'

  // 定义全局组件global-component，可以用于根节点下的任何地方
  Vue.component('global-component', {
    template: "<div>{{globalTitle}}</div>",
    data: function() {
      return {
        globalTitle: '我是全局组件'
      }
    }
  })

  export default {
    name: 'App',
    data() {
      return {
        msg: '研究全局组件与局部组件'
      }
    },
    //定义一个局部子组件
    components: {
      'child-one': {
        template: '<div>{{oneTitle}}</div>',
        //子组件的数据必须以函数返回值的形式定义，不可以使用对象定义
        data: function() {
          return {
            oneTitle: '我是局部子组件child-one'
          }
        }
      },
      'child-two': {
        template: '<div>{{towTitle}}</div>',
        data: function() {
          return {
            towTitle: '我是局部子组件child-two'
          }
        }
      }
    }
  }
</script>
<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>