首页 > 其他分享 ># vue组件设计的思路

# vue组件设计的思路

时间:2022-09-01 08:22:48浏览次数:70  
标签:vue 插槽 嵌套 深度 组件 思路 传值

vue组件设计的思路

  1. 组件不要嵌套太深,最好是小于三层,一旦深度超过三层,组件间的传值就是变得很复杂,所以也可以多多使用插槽的功能,降低组件之前嵌套的深度.
  2. 什么时候使用插槽,插槽容器一般用来放置一些布局内容,一些比较固定的东西,一些静态的数据,比如文字说明和布局.而插槽里面的内容一般都是用来存放一些变化的数据,一些数据经常变化的组件,适合用作插槽.

一般来说,当我们使用插槽的时候,这个组件深度也是变浅了,所以也更利于组件简的传值.

  1. 如果组件嵌套的深度太长,在vue3中父组件可以通过provide和inject的方式向子孙组件传值,但是子孙想要向父组件传值,就是变得非常复杂,发送事件需要一层层上抛,所以就是显得非常复杂.所以可以通过插槽的方式,将原本三层深度的组件变成两层深度的组件,这样更利于组件的传值,也是变成父子组件之间的传值.

标签:vue,插槽,嵌套,深度,组件,思路,传值
From: https://www.cnblogs.com/zhuoss/p/16645193.html

相关文章

  • VSCode创建Vue项目完整教程
    VSCode创建Vue项目完整教程文章目录一、配置环境1.安装VSCode2.安装node.js3.安装配置脚手架vue-cli二、创建vue项目1.命令方式创建2.重新初始化依赖3.启动项目......
  • 2行JS代码实现Vue全选和反选
    实现效果:第一行:子选项的选中状态等于全选框的状态this.letters.forEach(item=>item.check=this.checkAll)第二行:使用数组every方法的特性,数组的每一项均满......
  • Jetpack架构组件学习(4)——APP Startup库的使用
    最近在研究APP的启动优化,也是发现了Jetpack中的AppStartup库,可以进行SDK的初始化操作,于是便是学习了,特此记录原文:Jetpack架构组件学习(4)——AppStartup库的使......
  • springboot+Vue项目允许跨域
    packagecom.example.demo.itkb.user.config;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.config.annotat......
  • 大数据分析常用组件、框架、架构介绍(Hadoop、Spark、Storm、Flume、Kafka、Logstash、
    首先,数据传输组件:①Kafka是用Scala编写的分布式消息处理平台。②Logstash是用JRuby编写的一种分布式日志收集框架。③Flume是用Java编写的分布式实时日志收集框架。......
  • 用Vue框架实现 - 点击切换图片
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"con......
  • vue(1)
    序1.Vue是什么?Vue是一套用于构建用户界面的渐进式框架,响应式系统,自底向上逐层应用2.开始语法入门本来要下好多东西的,但是刚刚开始学所以跟老师走点击查看代码S......
  • 用Vue框架实现 - JSON数据渲染页面
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="referrer"content="no-referrer"/><metahttp-equiv="X-UA-Compatibl......
  • 快速入门VUE
    准备Vue.js环境Java语言的程序包:jar包JavaScript语言的程序包:外部js文件对于Java程序来说,框架=jar包+配置文件。对于Vue来说,导入Vue的外部js文件就能够使用Vue框架了......
  • 用Vue框架实现 - 移动端的tabbar
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"conten......