Vue 组件引用流程

在工程目录/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>

效果截图:

源码效果截图:

发布了1266 篇原创文章 · 获赞 275 · 访问量 290万+

猜你喜欢

转载自blog.csdn.net/zhouzhiwengang/article/details/103797187