Vue-30、Vue.Component

发布时间：2024年01月19日
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.component</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="./js/dayjs.min.js"></script>
    <style>
    </style>
</head>
<body>
<div id="root">
    <app></app>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    //第一步创建school组件
    const school = Vue.extend({
        //el:'#root'   //一定不要写el 配置项，因为最终所有的组件都要被一个vm 管理，由vm决定服务于那个容器。
        template: `
          <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <hr>
          </div>
        `,
        data() {
            return {
                schoolName: '清华大学',
                address: '北京',
            }
        },
    });
    console.log('@',school);
    const app = Vue.extend({
        template: `
        <div>
            <school></school>
        </div>
        `,
        components: {
            school
        }
    });
    new Vue({
        el: "#root",
        components: {
            app
        }
    })
</script>
</body>
</html>

总结

在这里插入图片描述

文章来源:https://blog.csdn.net/ChenJin_2/article/details/135700826
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章