首页 > 其他分享 >Vue组件

Vue组件

时间:2022-12-05 19:22:05浏览次数:43  
标签:Vue 自定义 props 使用 组件 属性

组件的使用

  1. 使用import语法导入需要的组件
  2. 使用components节点注册组件
  3. 以标签形式使用刚才注册的组件

全局组件: 在main.js入口文件中,通过Vue.component()方法注册全局组件

组件的props:自定义属性

  • 允许使用者通过自定义属性,为当前组件指定初始值。
  • props: ['用户自定义名称']
  • 提供属性值时,使用v-bind可以把"1"识别为数字
  • props是'只读的',要想修改props的值,可以转存到data中
    props:{
     init:{
      default : 0,
      type : Number
     }
    }
    添加required为true后,使用该组件必须填写该props属性

组件样式

在修改当前组件样式时,加scoped
当使用第三方组件库时,要想修改第三方组件的默认样式,需要用到/deep/

标签:Vue,自定义,props,使用,组件,属性
From: https://www.cnblogs.com/lsl-myblog/p/16953217.html

相关文章

  • vue实现路由懒加载
    1、安装插件@babel/plugin-syntax-dynamic-importnpminstall–-save-dev@babel/plugin-syntax-dynamic-import2、安装完成之后,打开babel.config.js文件,将@babel/p......
  • Vue2(笔记21) - 组件 - 组件的嵌套
    组件的嵌套官方的图中,就可以看出,组件之间是可以嵌套的;没有嵌套的组件为了方便,就直接把前面写好的拿来用了;<divid="root"><h1>{{msg}}</h1><hr><school></schoo......
  • 【Vue】ElementUI中el-tabs事件绑定的具体使用_vue.js
    tabs组件的属性tabs的属性tabs的事件tab-pane的属性标签代码<el-tabsv-model="activeName"><el-tab-panename="0"label="标签1"></el-tab-pane><e......
  • vue tinymce富文本编辑器封装
    <template><divstyle="position:relative;"><divstyle="text-align:right;margin-bottom:20px;"><el-popoverplacement="right"wi......
  • React后台管理系统05 引入UI组件库
    使用命令引入UI组件库npminstallantd--save使用命令安装ant的图标库npminstall--save@ant-design/icons ,注意这里的@后面是一个ant没有单词d!配置AntdDesign......
  • 记录--react native 封装人脸 检测、美颜组件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助本组件目前只能用在ReactNative的iOS端本组件来之实际中的开发需求:可以检测并且标记人脸,实现基本的美......
  • 同时引用同一个组件的两个版本
    在我们开发项目时,引用组件一般都是使用Nuget获取最新稳定版本,不可能出现同一个组件,引用两个版本。但是有些小伙伴维护老系统时,发现有些组件是用以前的低版本,无法直接升......
  • 【Vue】elementUI中el-radio-group的使用
          ......
  • vue中生命周期函数
    beforeCreate://在实例初始化后,事件/监听配置之前使用created://实例创建完成后使用beforeMount://挂载开始之前被调用beforeUpdate://更新之前调用updated://更新中调用acti......
  • Vue2(笔记19) - 组件 - 对组件的理解
    传统方式写应用传统方式做项目:一个页面一个html,每个页面都会引入几个js 和css,代码交叉复制、文件交叉引用;存在的问题:1)依赖关系混乱,不好维护;2)代码复用率不高;模块化:理解:......