1、新建组件：components/Test.vue

<template>
  <div>
    {{title}}
  </div>
</template>

<script>
    export default {
        name: "Test",

        data () {
          return {
            title: '我擦嘞！！！',
            type: 'A',
            user: {
              name: '小甲',
              age: '19',
              sex: '男'
            },

          }
        }

    }
</script>

<style scoped>

</style>

2、主组件App.vue这样写
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!-- 3.在template中就可以直接使用了 -->
    <Test></Test>

  </div>
</template>

<script>
  // 1.使用import导入你子组件
  import Test from "./components/Test";
export default {
  name: 'App',
  // 2.写入子组件
  components: {Test}
}
</script>

<style>

</style>