Vue学习日记（13）组件

最新推荐文章于 2025-01-10 17:11:19 发布

原创

最新推荐文章于 2025-01-10 17:11:19 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

这篇博客介绍了Vue.js中组件的定义和使用。首先展示了如何创建并注册非单文件组件，如`school`、`student`和`hello`，然后通过`Vue.component`进行全局注册。接着，通过实例化Vue对象在`#root`和`#root2`中使用这些组件。此外，还演示了组件的嵌套，创建了`xs`和`xx`组件，并在`app`组件中进行嵌套使用。整个过程详细地展示了Vue.js组件化的实现方式。

组件的定义

在这里插入图片描述

非单文件组件

在这里插入图片描述

	<div id="root">
        <!-- 第三步：使用组件标签 -->
        <xuexiao></xuexiao>
        <hr>
        <xuesheng></xuesheng>
        <hr>
        <hello></hello>
        <hr>
    </div>

    <div id="root2">
        <hello></hello>
    </div>
   
    
</body>

<script