当前位置: 首页 > news >正文

组件的基本使用上

1 组件的注册

组件之间可以相互的引用,但有一个前提-----------注册

1.1 注册的两种方式

全局注册和局部注册两种


全局注册:

被全局注册的组件,可以在全局任何一个组件内使用

1.在main.js内导入两个组件

2.调用 app 实例的 component() 方法,再全局注册两个组件,两个参数(' 前面字符串是名称 ',xx)

3.在其他组件中直接以标签的形式就能使用


局部注册:

被局部注册的组件,只能在当前注册的范围内使用

1 如果要在App.vue组件中使用,先在App.vue中导入

2 通过components节点,为当前组件注册私有子组件

components : {

‘ 组件名称 ’ :组件

             }

3 通过标签的形式,在当前组件内使用(因为局部注册只能在局部使用


2 组件之间的样式冲突


3 组件的props

可以简单理解为:组件向组件传递数据,以前是组件向标签传递

为了提高组件的复用性,在封装组件时需要遵守如下原则

组件中要展示的数据,尽量由组件的使用者提供

WHY?

为了方便使用者为组件提供要使用的数据,vue组件提供了props概念。

props是组件的自定义属性,组件的使用者可以通过props把数据传递到子组件内部,供子组件内部使用。

HOW?

props的作用:父组件通过props向子组件传递要展示的数据

3.2 使用props属性------指的是父组件的子组件标签属性

在封装vue组件时,可以把动态的数据项声明为props自定义属性。自定义属性可以在当前组件中被直接使用。

3.3 动态绑定 props 的值

在父组件标签中,可以通过v-bind属性绑定的形式,为组件动态绑定 props 的值

因为v-biand就是属性绑定指令,在子组件标签内绑定 title 和 author 等属性

这和前面的v-biand属性绑定指令内容串联起来

相关文章:

  • 电子技术中的dB
  • 组件的基本使用下
  • Git代码版本控制
  • 阿里云9折推荐码:0LGVW2
  • 微信小程序真机调试regeneratorRuntime is not defined错误
  • 给笔记本电脑外接显示器增加副屏
  • wx.getUserProfile is not a function微信小程序报错
  • TCP连接探测中的Keepalive和心跳包
  • 关于Redis的一些好玩东西
  • hot code loading in nodejs
  • java中的基本数据类型
  • Eclipse如何生成jar包
  • 磁盘文件系统管理命令
  • java中char数据类型的使用
  • java中数据类型间的强制转换
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • dva中组件的懒加载
  • JavaSE小实践1:Java爬取斗图网站的所有表情包
  • nginx 配置多 域名 + 多 https
  • October CMS - 快速入门 9 Images And Galleries
  • Odoo domain写法及运用
  • Otto开发初探——微服务依赖管理新利器
  • Python进阶细节
  • quasar-framework cnodejs社区
  • react-core-image-upload 一款轻量级图片上传裁剪插件
  • Spring Boot MyBatis配置多种数据库
  • Unix命令
  • vue的全局变量和全局拦截请求器
  • webgl (原生)基础入门指南【一】
  • 彻底搞懂浏览器Event-loop
  • 初探 Vue 生命周期和钩子函数
  • 个人博客开发系列:评论功能之GitHub账号OAuth授权
  • 关于 Linux 进程的 UID、EUID、GID 和 EGID
  • 码农张的Bug人生 - 见面之礼
  • 使用 @font-face
  • 这几个编码小技巧将令你 PHP 代码更加简洁
  • 正则学习笔记
  • 如何用纯 CSS 创作一个菱形 loader 动画
  • (2)Java 简介
  • (6)设计一个TimeMap
  • (C语言)fgets与fputs函数详解
  • (done) 两个矩阵 “相似” 是什么意思?
  • (八)Spring源码解析:Spring MVC
  • (八十八)VFL语言初步 - 实现布局
  • (第8天)保姆级 PL/SQL Developer 安装与配置
  • (二)WCF的Binding模型
  • (附源码)node.js知识分享网站 毕业设计 202038
  • (附源码)springboot美食分享系统 毕业设计 612231
  • (十)【Jmeter】线程(Threads(Users))之jp@gc - Stepping Thread Group (deprecated)
  • (十三)Maven插件解析运行机制
  • (太强大了) - Linux 性能监控、测试、优化工具
  • (已解决)vue+element-ui实现个人中心,仿照原神
  • .bat批处理(八):各种形式的变量%0、%i、%%i、var、%var%、!var!的含义和区别
  • .bat批处理(三):变量声明、设置、拼接、截取
  • .gitattributes 文件