网站加速工具,赣州做网站的公司有哪家,成品直播大全观视频的技巧,北京网站建设公司价格动态组件 插槽 自定义指令 一、动态组件1.什么是动态组件2.如何实现动态组件渲染3.使用 keep-alive 保持状态4. keep-alive 对应的生命周期函数5. keep-alive 的 include 属性6.动态展示左右组件7.例子 二、插槽1.什么是插槽2.体验插槽的基础用法2.1 没有预留插槽的内… 动态组件 插槽 自定义指令 一、动态组件1.什么是动态组件2.如何实现动态组件渲染3.使用 keep-alive 保持状态4. keep-alive 对应的生命周期函数5. keep-alive 的 include 属性6.动态展示左右组件7.例子 二、插槽1.什么是插槽2.体验插槽的基础用法2.1 没有预留插槽的内容会被丢弃2.2 后备内容默认内容 3.具名插槽3.1 为具名插槽提供内容3.2 具名插槽的简写形式 4.作用域插槽4.1 使用作域插槽4.2 解构插槽 Prop 5.例子 三、自定义指令1.什么是自定义指令2. 自定义指令的分类3.私有自定义指令4. 使用自定义指令5. 为自定义指令动态绑定参数值6. 通过 binding 获取指令的参数值7. update 函数8. 函数简写9. 全局自定义指令 一、动态组件
1.什么是动态组件
动态组件是指在应用程序运行时动态加载和卸载的组件。通常组件在应用程序启动时就已经加载了但是在某些情况下我们可能需要动态地加载组件例如当某些组件只有在特定条件下才需要使用时。
2.如何实现动态组件渲染
vue提供了一个内置的 component 组件 专门用来实现动态组件的渲染 。示例代码如下 template!-- 2 通过is属性动态指定要渲染的组件 --component :iscomName/component!-- 3 点击按钮动态切换组件 --button clickcomName Left展示左组件/buttonbutton clickcomName Right展示右组件/button
/templatescript
// 引入子组件
import Left from ./components/Left.vue;
import Right from ./components/Right.vue;
export default {// 根组件的数据data() {return {comName: , // 记录当前显示的子组件名称}},// 引入子组件components: {Left,Right}
}
/script3.使用 keep-alive 保持状态
默认情况下切换动态组件时无法保持组件的状态 。此时可以使用 vue 内置的 keep-alive 组 件保持动态件的状态。示例代码如下 !-- 使用 keep-alive 包裹动态组件实现组件缓存 --KeepAlivecomponent :iscurrentComponent/component/KeepAlive4. keep-alive 对应的生命周期函数
当组件被缓存时会自动触发组件的 deactivated 生命周期函数。 当组件被激活时会自动触发组件的 activated 生命周期函数。 5. keep-alive 的 include 属性
include属性用来指定 只有名称匹配的组件会被缓存 。多个组件名之间使用英文的逗号分隔 KeepAlive includeMyLeft,MyRightcomponent :iscomName/component/KeepAliveexclude属性用来指定 只有名称不匹配的组件会被缓存 。多个组件名之间使用英文的逗号分隔。
6.动态展示左右组件
最终实现效果在展示右组件时左组件被缓存计数器数据得到保存。
template!-- 根组件模板 --div classapp-container!-- 根组件内容 --h1App 根组件/h1hr /!-- 切换展示子组件的按钮 --button clickcurrentComponent Left展示左组件/buttonbutton clickcurrentComponent Right展示右组件/button!-- 渲染子组件的容器 --div classbox!-- 使用 keep-alive 包裹动态组件实现组件缓存 --KeepAlive excludemyRight!-- 动态组件根据 currentComponent 的值渲染不同的子组件 --component :iscurrentComponent/component/KeepAlive/div/div
/templatescript
// 引入子组件
import Left from ./components/Left.vue;
import Right from ./components/Right.vue;
export default {// 根组件的数据data() {return {currentComponent: , // 记录当前显示的子组件名称}},// 引入子组件components: {Left,Right}
}
/scriptstyle scoped
.app-container {padding: 1px 20px 20px;background-color: #efefef;
}.box {display: flex;
}
/style
7.例子 二、插槽
1.什么是插槽
插槽 Slot是 vue 为组件的封装者提供的能力。允许开发者在封装组件时把不确定的 、希望由用户指定的部分定义为插槽。 可以把插槽认为是组件封装期间为用户预留的内容的占位符。
2.体验插槽的基础用法
在封装组件时可以通过slot元素定义插槽 从而为用户预留内容占位符 。示例代码如下 Leftp 内容会被显示/p/Lefttemplatediv classleft-containerh3Left 组件/h3slot/slot/div
/template2.1 没有预留插槽的内容会被丢弃
如果在封装组件时没有预留任何 slot 插槽 则用户提供的任何 自定义内容都会被丢弃 。示例代码如下 2.2 后备内容默认内容
封装组件时可以为预留的slot 插槽提供后备内容默认内容。如果组件的使用者没有为插槽提供任何内容则后备内容会生效。示例代码如下
3.具名插槽
如果在封装组件时需要预留多个插槽节点 则需要为每个slot 插槽指定具体的 name 名称 。这种带有具体名称的插槽叫做“具名插槽”。示例代码如下 注意没有指定 name 名称的插槽会有隐含的名称叫做 “default”
templatediv classarticle-containerh3 v-colorredArticle 组件/h3!-- 文章的标题 --div classheader-boxslot nametitle/slot/div!-- 文章的内容 --div classcontent-boxslot namecontent/slot/div!-- 文章的作者 --div classfooter-boxslot nameauthor/slot/div/div/templatescriptexport default {// 首字母要大写name: Article,}/scriptstyle langless scoped.article-container { div {min-height: 150px;}.header-box {background-color: pink;}.content-box {background-color: lightblue;}.footer-box {background-color: lightsalmon;}}/style
3.1 为具名插槽提供内容
在向具名插槽提供内容的时候我们可以在一个template 元素上使用 v-slot 指令并以 v-slot 的参数形式提供其名称。示例代码如下
3.2 具名插槽的简写形式
跟 v-on 和 v-bind 一样 v-slot 也有缩写即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot: header 可以被重写为 #header app.vuetemplatediv classapp-containerh1App 根组件/h1hr /div classbox!-- Left/Left --Articletemplate #titleh1腾王阁序/h1/templatetemplate v-slot:contentp豫章故郡洪都新府/pp星分翼轸地接衡庐/pp襟三江而带五湖控蛮荆而引瓯越/p/templatetemplate #authorp作者王勃/p/template/Article/div/div
/templatescript
import Left from ./components/Left.vue
import Article from ./components/Article.vue;export default {components: {Left,Article,}
}
/scriptstyle scoped
.app-container {padding: 1px 20px 20px;background-color: #efefef;
}.box {display: flex;
}
/style
article.vue
templatediv classarticle-containerh3 Article 组件/h3!-- 文章的标题 --div classheader-boxslot nametitle/slot/div!-- 文章的内容 --div classcontent-boxslot namecontent/slot/div!-- 文章的作者 --div classfooter-boxslot nameauthor/slot/div/div/templatescriptexport default {// 首字母要大写name: Article,}/scriptstyle langless scoped.article-container {flex: 1; div {min-height: 150px;}.header-box {background-color: pink;}.content-box {background-color: lightblue;}.footer-box {background-color: lightsalmon;}}/style
4.作用域插槽
在封装组件的过程中可以为预留的slot 插槽绑定 props 数据这种带有 props 数据的 slot 叫做“ 作用域插槽 ”。示例代码如下:
4.1 使用作域插槽
可以使用 v-slot: 的形式接收作用域插槽对外提供的数据。示例代码如下 4.2 解构插槽 Prop
作用域插槽对外提供的数据对象可以使用解构赋值简化数据的接收过程。示例代码如下 5.例子
三、自定义指令
1.什么是自定义指令
vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。
2. 自定义指令的分类
vue 中的自定义指令分为两类分别是 ⚫ 私有自定义指令 ⚫ 全局自定义指令
3.私有自定义指令
在每个 vue 组件中可以在 directives 节点下声明私有自定义指令。示例代码如下 export default { directives:{color:{bind(el){el.style.colorred}}}}4. 使用自定义指令
在使用自定义指令时需要加上 v- 前缀。示例代码如下 5. 为自定义指令动态绑定参数值
在 template 结构中使用自定义指令时可以通过等号的方式为当前指令动态绑定参数值
6. 通过 binding 获取指令的参数值
在声明自定义指令时可以通过形参中的第二个参数来接收指令的参数值 7. update 函数
bind 函数只调用 1 次当指令第一次绑定到元素时调用当 DOM 更新时 bind 函数不会被触发。 update 函数会在每次 DOM 更新时被调用。示例代码如下
8. 函数简写
如果 bind 和update 函数中的逻辑完全相同则对象格式的自定义指令可以简写成函数格式 9. 全局自定义指令
全局共享的自定义指令需要通过“Vue.directive()”进行声明示例代码如下
