Vue 组件引用流程

ゝ一世哀愁。 2023-10-10 10:43 47阅读 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 条评论，47人围观）

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

相关阅读

相关 Vue 组件引用流程

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

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

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

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

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

相关 Vue组件相关引用

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

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

相关 Vue 组件

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

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

相关 vue组件

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

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

相关 vue流程step组件

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

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

相关 vue组件

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

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

相关 VUE组件

VUE Component 一、概述 1. 作用扩展HTML元素，封装可重用的代码。在需要使用的地方引用组件。二、VUE前情回顾使用： 1.

雨点打透心脏的1/2处/ 2022年01月29日 06:19/ 0 赞/ 352 阅读

相关 Vue组件

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

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

相关 mpvue 组件引用

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

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