首页 > 其他分享 >vue项目中components组件(模板)的使用和传值

vue项目中components组件(模板)的使用和传值

时间:2023-01-19 23:45:49浏览次数:51  
标签:vue header 传值 components 组件 模板

在项目开发过程中,我们经常会遇到重复代码结构,比如页面的头部、底部等,通常我们都是作为模板或者公共文件进行设计使用,在vue中,我们可以使用components组件(模板)来实现。下面我们按步骤实现组件的使用

第一步:创建组件vue文件

我们在src目录下的创建一个components文件夹,可以在这个文件夹下创建文件,如Header.vue,   Aside.vue等等

 

第二步:在要引入的.vue代码中中引入组件文件

import Aside from "@/components/Aside";
import Header from "@/components/Header";

 

 

第三步:注册组件

 

 

 第四步:应用组件

这是不传值的时候

<Aside></Aside>

<Header></Header>

想要了解组件传值传方法的话看看这个

或者:

 

引入:

 import header from '@/views/header/header'

注册:

components: {
        'my-header': header
}

应用:

<my-header></my-header> 

 

标签:vue,header,传值,components,组件,模板
From: https://www.cnblogs.com/lipu123/p/17062310.html

相关文章

  • vue.js客服系统实时聊天项目开发(六)获取URL中的GET参数(支持/#/?单页锚点hash模式)
    封装一个函数获取URL中的GET参数需要支持锚点链接例如:http://localhost:8080/#/chatApp?ent_id=5具体来说varquery=window.location.search.substring(1);......
  • Vue 中如何监测数组的变化?
    在Vue中,如果直接对数组进行操作,比如使用下标直接修改元素,Vue是无法监测到这种变化的,导致无法触发视图更新。针对该问题,总结如下解决方法:一、使用Vue.js提供的方法来......
  • Vue 中 data 为什么必须是一个函数?
    在Vue中,每个组件都是一个对象,当多个实例共享同一对象时,它们将共享相同的状态。如果data不是一个函数并且是一个对象,那么所有组件实例将共享相同的data对象,这样就会导......
  • Vue2.0项目引入字体库font-awesome
    1.安装依赖npminstallfont-awesome--save2.引入依赖可以选择全局引入或局部引入import'font-awesome/css/font-awesome.min.css';3.使用方式3.1.基本图标......
  • VueUse实用工具
    1.安装npmi@vueuse/core2.使用useClipboard剪贴板<scriptsetuplang="ts">import{ref}from'vue'import{useClipboard,usePermission}from'@vue......
  • 使用 IDEA 工具打开vue/react/node项目
    1.IDEA在官网上下载社区免费版的https://www.jetbrains.com/zh-cn/idea/download/#section=mac下载完成后,一直点击next安装即可2.安装完成后点击open打开gitcl......
  • vant+vue3自定义主题
    很多系统都会有切换主题的功能,现在做的是一个vant的项目,特地记录一下这里面用到的css3的一个技术,也就是变量,css3的var()和自定义变量,具体使用可百度大题逻辑是这样 ......
  • Vuw2和Vue3如何使用ref获取元素节点?
    Vue2中<template><divid="app"><divref="echohye">新年快乐</div></div></template><script>exportdefault{mounted(){console.log(this.$ref......
  • react,vue中的key有什么作用?(key的内部原理)
    1.虚拟DOM中的key的作用:key是虚拟dom对象的标识,当状态中的数据发生变化时,vue会根据新数据生成新的虚拟dom,随后vue进行新的虚拟dom与旧的虚拟dom的差异比较。2.比较规则(1......
  • uniapp vue2.0 动态绑定style
    简单记录几种写法<view:style="{height:height+'rpx'}">动态高度,固定单位</view><view:style="[{height:height+'rpx'}]">动态高度,固定单位,数组写法</vi......