Vue非单文件组件

App.vue

<template>
    <div>
        <school></school>
        <hr>
        <student></student>
    </div>
</template>

<script>
import Vue from 'vue'

const school = Vue.extend({
        //配置组件使用的模板，需要用一个div套在外面，确保只有一个根元素。
        //这里就封装了组件的html。
        template:`
        <div>
        <div>学校：{{schoolName}}</div>
        <div>地址：{{schoolAddress}}</div>
        </div>
        `,
        //配置数据
        data() {
            return {
            schoolName:"尚硅谷",
            schoolAddress:"北京"
            }
        },
});
const student = Vue.extend({
        template:`
        <div>
        <div>学生:{{studentName}}</div>
        <div>年龄:{{studentAge}}</div>
        </div>
        `,
        data() {
            return {
            studentName:"张三",
            studentAge:18
            }
        },
});

export default {
    name: "App",
    components:{
       school,
       student
    }
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')