Vue一个组件引用另一个组件

1.这里有两个组件Demo.vue和Message.vue两个组件，现在在Demo.vue组件中引入Message.vue组件

2.路由index.js文件中配置Demo.vue的访问路径

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'
import Demo from '@/components/Demo'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'Test',
      component: Test
    },
    {
      path: '/demo',
      name: 'demo',
      component: Demo
    },
  ]
})

3.在Demo.vue组件中引入Message.vue组件

<template>
  <div>
    <el-checkbox v-model="checked1" >备选项1</el-checkbox>
    <el-checkbox v-model="checked2" >备选项</el-checkbox>

    <!--3.引入组件要展示的地方，标签名与components中的对应-->
    <Message></Message>

  </div>
</template>
<script>
  //1.引入组件内容
  import Message from '@/components/Message'

  export default {
    name:"demo",
    data() {
      return {
        checked1: false,
        checked2: true
      };
    },
    //2.components是与data同级，最好里面是大写，因为template里面要大写
    components:{
      Message
    }
  };
</script>

4.Message.vue中的内容

<template>
    <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
      name:"message",
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>