Vue 组件引用流程

最新推荐文章于 2024-07-04 10:01:18 发布

在奋斗的大道

最新推荐文章于 2024-07-04 10:01:18 发布

阅读量706

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/zhouzhiwengang/article/details/103797187

版权

84 篇文章 11 订阅

订阅专栏

在工程目录/src下创建component文件夹，并在component/home文件夹下创建一个logo.vue并写仿照 App.vue 的格式写一个组件。

<template>
  <div>
   vue 组件嵌套
  </div>
</template>

<script>
    export default {
        name: "logo"
    }
</script>

<style scoped>

</style>

在component/Login.vue 组件中使用自定义的logo.vue组件

第一步，引入。在<script></script>标签内的第一行写:

import logo from './home/logo.vue'

第二步，注册。在<script></script>标签内的 name代码块后面加上 components: { logo}

  components: { logo },

第三步：使用。在<template></template>内加上<logo></logo>

<template>
  <body id="poster">
  <logo></logo>

效果截图：

源码效果截图：

关注

专栏目录