Vue 组件引用流程

ゝ一世哀愁。 2023-10-10 10:43 61阅读 0赞

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

效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70][]

源码效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200101233122982.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200101233245762.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pob3V6aGl3ZW5nYW5n,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，61人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 组件引用流程

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

ゝ一世哀愁。/ 2023年10月10日 10:43/ 0 赞/ 62 阅读

相关 Vue组件中的生命周期函数执行流程

Vue的生命周期什么是生命周期呢？生物学上，生物生命周期指得是一个生物体在生命开始到结束周而复始所历经的一系列变化过程；每个组件都可能会经历从创建、挂

╰半夏微凉°/ 2023年09月28日 15:56/ 0 赞/ 7 阅读

相关 VUE项目学习（五）：引用echarts组件

VUE项目学习（五）：引用echarts组件演示效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

逃离我推掉我的手/ 2023年01月05日 03:55/ 0 赞/ 330 阅读

相关 Vue组件相关引用

Vue组件可以理解为将多个小的东西封装成一个大的东西，然后可以直接对大的东西来进行操作，组件的核心是`VirtualDOM`（虚拟DOM）组件在注册也分为全局组件与

快来打我*/ 2022年12月13日 12:45/ 0 赞/ 233 阅读

相关 Vue 组件

首先，我们还是先创建一个vue实例，很熟练了，没难度。 <div id="app"></div> <script> let vm =

落日映苍穹つ/ 2022年05月29日 09:26/ 0 赞/ 376 阅读

相关 vue组件

全局组件  Vue.component('todo-list',{ template:"<li>{

左手的ㄟ右手/ 2022年05月13日 23:23/ 0 赞/ 358 阅读

相关 vue流程step组件

效果图 ![在这里插入图片描述][20190531161023246.png] ![在这里插入图片描述][2019053116103546.png] <te

我就是我/ 2022年04月25日 10:40/ 0 赞/ 773 阅读

相关 vue组件

定义全局组件的三种方式方式1,伪代码 <div id="app"> <-- 引用组件,是引号里的名词，不是实例对象--> <m

落日映苍穹つ/ 2022年04月23日 15:38/ 0 赞/ 394 阅读

相关 Vue组件

Vue组件 1. 什么是组件 1. 组件的概念：组件即自定义控件，是Vue.js最强大的功能之一 2. 组件的用途：组件能够封装可重用代码，扩展html标签功能

ゝ一世哀愁。/ 2021年07月24日 23:50/ 0 赞/ 655 阅读

相关 mpvue 组件引用

在list.vue中引用list-tenplatv.vue模板 ![20190916144849293.png][] list-tenplatv.vue模板页

朴灿烈づ我的快乐病毒、/ 2021年07月24日 23:35/ 0 赞/ 411 阅读