vue用于动态切换组件的内置组件,vue组件和插件
本文主要介绍vue.js的动态组件和槽的使用总结，文章围绕主题，介绍细节，有一定的参考价值，有需要的朋友可以参考一下。
目录
组件高级-props验证props验证组件高级-动态组件高级-保活组件高级-保活组件高级-指定缓存组件高级-默认槽格式组件高级-命名槽组件高级-作用域槽(难度)自定义指令-自定义指令的基本用法-定义方法示例自动获取焦点自定义指令-传递值和更新
组件进阶-props校验
props校验
常见格式：props: [propA ， propB]。没有类型检查。
高阶格式：
道具：{
//基本类型检查(` null 和undefined将通过任何类型验证)
普罗帕：数字，
//多个可能的类型
propB:[字符串，数字]，
//必需的字符串
propC: {
类型：字符串，
必填：真
},
//带有默认值的数字
propD: {
类型：数量，
默认值：100
},
//具有默认值的对象
属性：{
类型：对象，
//对象或数组默认值必须从工厂函数中获取
默认值：function () {
return { message:你好 }
}
},
//自定义验证函数
propF: {
验证器：函数(值){
//该值必须与下列字符串之一匹配
return [成功，警告，危险]。indexOf(value)！==-1
}
}
}
组件进阶 - 动态组件
目标效果：
需求： 完成一个注册功能页面，切换两个按钮，封装两个附加组件：一个是填写注册信息，一个是填写用户档案信息。
超过10-59，000个组件使用同一个装载点，并且可以动态切换。这是动态组件。
目标：
根组件
应用程序
组件
用户名. vue #用户名和密码输入框
UserInfo.vue #人生格言和自我介绍框
目录结构：
组件：is= com name /组件
格式：
用户名. vue
模板
差异
h2用户名/h2
Pusername: input//p
密码：textarea//p
/div
/模板
脚本
导出默认值{
}
/脚本
操作：
模板
差异
按钮@ click= comname= username 填写帐户密码/按钮
button @ click= comname= userinfo 个人信息填写/button
预印组件显示如下：/p
div style=border: 1px纯红
！- vue内置的组件组件可以动态显示组件-
组件：is= com name /组件
/div
/div
/模板
脚本
从导入用户名。/UserName ；
从导入UserInfo。/UserInfo ；
导出默认值{
data() {
返回{
comName:“用户名”，
};
},
组件：{
用户名，
用户信息，
},
};
/脚本
在父组件App.vue中使用：
Is只能是动态属性=":is=组件注册后的标记名字符串或数据变量。不能用注意：直接分配注册的tag名称。
Vue有一个内置的component组件，用is属性设置要显示的组件的标签名。
组件进阶-keep-alive组件
小结：
掌握组件缓存的使用
目标：
组件切换会导致组件的频繁破坏和重新创建，这在大多数情况下有其自身的意义，但也可能导致不必要的性能损失。
1:可以先为UserName.vue和UserInfo.vue注册创建和销毁的生命周期事件，观察创建和销毁的过程。
keep-alive
通过Vue内置的keep-alive组件，被包装的组件可以保存在内存中而不会被破坏。
背景：
2:使用keep-alive内置的vue组件来缓存动态组件，而不是销毁它们。
互补生命周期：
激活-激活去激活-丢失激活状态保活
！- vue内置的组件组件可以动态显示组件-
组件：is= com name /组件
/保持活力
格式：
Keep-alive可以提高组件的性能，内部封装的标签不会被破坏和重新创建，触发主动和非主动生命周期方法。
组件进阶-keep-alive组件-指定缓存
小结：
掌握keep-alive的包含属性的用法
目标：
Include=组件名1，组件名2 . :include=[组件名1 ，组件名2] keep-alive include=名称1，名称2
！- vue内置的组件组件可以动态显示组件-
组件：is= com name /组件
/保持活力
语法：
首先，检查组件自己的名称选项是否匹配。如果名称选项不可用，请匹配其本地注册名称(父组件组件选项的键值)。
组件进阶 - 默认插槽
注意：
掌握组件插槽的使用。
目标：
理解：
生活中的插槽
在组件槽中引入自定义结构，实现组件的内容分发，通过槽标签可以接收组件标签中写入的内容。vue提供了组件插槽能力，允许开发人员在打包组件时将不确定的部分定义为插槽。
格式
定义组件时，使用槽来占据模板中的一个孔；
使用时，用组件之间的内容物填充孔；
组件进阶-具名插槽
vue中的插槽
掌握命名插槽的使用
目标：
当组件中有两个以上的位置需要外部引入标签时
格式
背景：
模板# xxx
使用：
进入的标签可以被分别分配到不同的时隙位置。v-slot一般和template标签一起使用(template是html5的新标签内容模板元素，不会在页面上渲染，一般被vue解释为内部标签)图示：
示例：
div class= container v-show= is show
slot name=one/slot
插槽名称=two/slot
/div
1.子组件-Pannel2.vue
v型槽可以简化为#使用
V-bind可以省略为：
V-on:可以省略为@
v型槽：可简化为#
2 .父组件-UseSlot2.vue
面板12
模板v形槽：一个
img src=./assets/mm.gif alt= /
/模板
模板v形槽：两个
Span，我是一个单词/span
/模板
/panel 2
写法1:
面板12
！-简化写作-
模板一
差异
p冷雨连江入夜吴。/p
平明送别楚古山。/p
PLuoyang朋友和亲戚互相询问。/p
一块冰心在玉壶里。/p
/div
/模板
模板二
img src=./assets/mm.gif alt= /
/模板
/panel 2
写法2：
当一个插槽有多个已定义的组件时：插槽的名称属性以插槽名称开始。当使用组件时，模板匹配# slot名称以传入特定的html标记或组件。
组件进阶-作用域插槽（难点）
小结：
掌握作用域插槽的用法。
目标：子组件中的数据，当给插槽赋值时，使用=child to parent=在父组件环境中传输数据。
目标：
创建子组件，准备插槽，并在插槽上绑定属性和子组件值。使用子组件，传入自定义标签，并使用template和v-slot= custom variable name 自定义变量名。插槽上的所有属性都将被自动绑定，因此您可以使用子组件中的值并替换插槽位置步骤：。
示例：
模板
div style= border:1px solid # CCC；保证金：5px填充：5px
H2组件/h2
！-向插槽添加自定义属性-
插槽名称=内容:a=1 :b=2
默认内容
/插槽
/div
/模板
脚本
导出默认值{
}
/脚本
父组件
模板
div style= border:1px solid # CCC；保证金：5px填充：5px
H145-插槽范围插槽/h1
前川
！-
V-slot: slot name= object
该对象将自动接收由该插槽传回自定义属性。
-
模板v-slot:content=scope
！- h1自定义内容，填入空洞，{{scope}}/h1-
h3{{scope.a}}/h3
p{{scope.b}}/p
/模板
/MyCom
/div
/模板
脚本
//从父级到子级
//1.传输数据。自定义属性(父属性)属性(子属性)
//2.传输结构。在组件中写入内容(父)槽(子)
从导入MyCom。/MyCom.vue
导出默认值{
组件：{ MyCom }
}
/脚本
样式范围。内容{
背景色：# ccc
}
/风格
具名插槽， 给slot绑定属性和值：
组件变量绑定到slot，然后使用组件v-slot: slot name= variable ，slot传递的属性和值会绑定到变量。
自定义指令-基本使用
自定义说明文档(理解)
除了核心功能的默认内置指令(v-model和v-show)，Vue还允许注册自定义指令=《 V-XXX》
CSS JS复用的主要形式是组件。需要对普通DOM元素进行底层操作，然后会用到自定义指令小结：。
扩展标签的额外功能。
自定义指令-定义方式
{
data(){}，
方法：{}，
指令：{
焦点：{//自定义指令名
inserted(El){//Fixed configuration item——该函数在指令插入标签时自动触发。
焦点()
}
},
},
}
示例 自动获取焦点
模板
差异
输入类型=text v-focus /
/div
/模板
脚本
导出默认值{
//寄存器
指令：{
焦点：{//自定义指令名
inserted(El){//Fixed configuration item——该函数在指令插入标签时自动触发。
焦点()
}
}
}
}
/脚本
自定义指令-传值和更新
Target:使用自定义指令传入一个值。
要求：定义颜色命令-传入一种颜色，并为标签设置文本颜色。
作用：
指令：{
颜色:{
Inserted(el，binding){ //插入时触发该函数
El . style . color=binding . value；
},
Update(el，binding){ //绑定变量更新时触发该函数=》手动更新
El . style . color=binding . value；
}
}
}
main.js定义处修改一下：
p-color= the color @ click= change color 使用v-color命令控制颜色，单击可变为蓝色/p。
脚本
data() {
返回{
颜色：“红色”，
};
},
方法：{
changeColor() {
this.theColor= blue
},
},
/脚本
Direct.vue处更改一下：
自定义指令，获取原生DOM，自定义操作
本文对vue.js动态组件和槽的使用总结到此为止。有关vue.js动态组件和插槽的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。