当前位置: 首页 > 网络应用技术

动态组件和插槽

时间:2023-03-08 13:45:22 网络应用技术

  普通格式:道具:[“ propa”,“ propb”]。没有类型的检查

  高级格式:

  需求:完成注册功能页面,2个按钮切换和两个其他组件:一个填写注册信息,一个填写用户配置文件信息

  目标:多个组件使用相同的安装点,并且可以动态切换。这是一个动态组件

  用户名

  在parent component app.vue中使用

  vue build -in组件组件,带有IS属性,设置要显示的组件标签名称

  掌握组件缓存的使用

  组件切换将导致组件经常被破坏并重新创建。在大多数情况下,它具有其自身的意义,但也可能导致不必要的性能丧失

  演示1:您可以首先注册用户名的创建和破坏生命周期事件。

  使用VUE构建的组件可以将包裹组件保存在内存中,而不会被破坏

  演示2:使用Keep-Alive的内置VUE组件来缓存动态组件,而不是破坏

  补充生命周期:

  饲养物可以改善组件的性能,并且内部包装的标签不会被破坏和重新创建,从而触发激活和非激活生命周期方法

  使用属性的属性的用法

  注意:

  掌握组件插槽的使用

  生活中的垃圾

  Vue中的插槽

  定义组件时,请使用插槽在模板中占据坑;

  使用时,填充组件之间的内容;

  掌握名称插槽的使用

  当组件中有两个部分时,外部需要两个地方引入两个地方

  定义:

  使用:

  数字:

  2.父亲的零件 - insslot2.Vue

  可以简化v-slot

  可以省略V型绑定:

  V-ON:可以省略@ V

  V-Slot:可以简化#

  写作1:

  写作2:

  掌握域插槽的使用

  目的:子组件中的数据,use => sub -father =“分配插槽时,在父组件环境中的数据

  名称插槽,绑定属性和插槽的值

  组件中的变量绑定到插槽,然后使用组件V-slot:插槽名称=“变量”。

  自定义说明文件(理解)

  除核心函数默认指令(和)外,VUE还允许注册自定义指令=“

  扩展标签其他功能

  目的:使用自定义说明传递值

  需求:定义颜色的颜色说明通行,将文本颜色设置为标签

  main.js定义办公室修改

  直接更改它

  摘要:V-XXX,自定义说明,获取本机DOM,自定义操作操作

  原始:https://juejin.cn/post/709571627196587039