目录

前言

diglog组件

准备工作：

在diglog.vue中模仿element-ui搭建diglog框架

该组件需要完成的任务：

title

diglog.vue代码：

App.vue代码：

效果：

自定义dialog的宽度和距离顶部的

 App.vue代码：

diglog代码：

效果：

自定义body内容

diglog.vue代码：

App.vue代码：

效果： 

自定义footer内容

diglog.vue代码：

App.vue

效果： 

dialog的显示与隐藏

.sync

定义与原理

使用场景

使用方法

注意事项

实操

第一步：

第二步：

第三步：

效果

结语

前言

    🎈🎈🎈Hello，Hello。这里是Blue，本篇文章我们将在前一篇文章http://t.csdnimg.cn/6atDj的基础上，继续封装组件。该组件为经常用的diglog，让我们来尝试去封装一下吧。希望各位在学习途中可以对组件有更多的理解。🎈🎈🎈

视频推荐：http://【VUE进阶-从0到1搭建UI组件库（1-3）】https://www.bilibili.com/video/BV1nJ411V75nhttps://blog.csdn.net/m0_75148088/article/details/140429791?p=13&vd_source=bb412cc25ca27e171f8e17085daad038 

diglog组件

准备工作：

第一步：

我们先创建一个diglog.vue组件，再在App.vue中进行对diglog的使用 

 第二步：在main.js中去将diglog.vue组件声明为全局

import Diglog from './components/diglog.vue' Vue.component(Diglog.name, Diglog)

在diglog.vue中模仿element-ui搭建diglog框架

效果如下：

该组件需要完成的任务：

title

• 父子组件传值以及props验证

• 利用{{}}将传入内容渲染上去

diglog.vue代码：

  export default {   name: 'WsDiglog',   props: {     title: {       type: String,       default: '提示'     } } 

App.vue代码：

效果：

自定义dialog的宽度和距离顶部的

 App.vue代码：

diglog代码：

效果：

自定义body内容

body内容可能是除span以外的其他内容，比如列表等，所以在这里使用插，并且在这里使用匿名插槽，使用匿名插槽的好处就是在使用时不需要使用template标签指定内容，直接在组件标签下编写内容即可。  

diglog.vue代码：

App.vue代码：

        
1
     
2
     
3
     
4
       

效果： 

自定义footer内容

footer中使用slot插槽，使其能够根据用户选择来进行是否需要其他东西  

diglog.vue代码：

设置footer插槽，如果没有指定footer插槽，则不显示

App.vue

效果： 

dialog的显示与隐藏

dialog组件的显示与隐藏，需要使用到sync语法糖

在前端开发中，特别是在使用Vue.js框架时，.sync修饰符是一个非常重要的概念，它主要用于简化父子组件之间数据的双向绑定过程。以下是对.sync修饰符的详细解释：

.sync

定义与原理

.sync修饰符是Vue.js提供的一种语法糖，用于实现父子组件之间的双向数据绑定。在Vue 2.3.0+版本中引入，用于替代之前版本的.sync修饰符（在Vue 2.0.0中作为组件的一个特殊选项存在，但在Vue 2.3.0+中被移除并重新作为修饰符引入）。

在Vue 3中，.sync修饰符继续存在，但需要注意的是，Vue 3推荐使用v-model的多个参数形式来实现类似的功能，因为v-model在Vue 3中被重新设计以支持自定义组件的双向绑定。不过，.sync修饰符仍然可以作为一种替代方案使用。

使用场景

.sync修饰符通常用于以下场景：

• 当父组件需要向子组件传递一个或多个prop，并希望子组件能够修改这些prop的值时。

• 子组件在修改prop的值后，需要通知父组件进行更新，以保持数据的一致性。

使用方法

在父组件中，使用.sync修饰符绑定prop时，Vue会自动监听子组件触发的update:propName事件，并将接收到的新值赋给绑定的数据项。

在子组件中，当需要修改someProp的值时，通过$emit触发update:someProp事件，并传递新的值。

注意事项

• .sync修饰符实际上是v-bind的语法糖，它会被扩展为v-bind绑定和v-on监听器的组合。

• 在Vue 3中，虽然.sync修饰符仍然可用，但推荐使用v-model的多个参数形式来实现双向绑定，因为它提供了更清晰的语义和更灵活的使用方式。

• 使用.sync修饰符时，需要注意避免在子组件中直接修改prop的值，因为这可能会导致数据流的不清晰和难以追踪的问题。相反，应该通过触发事件来通知父组件进行更新。

综上所述，.sync修饰符是Vue.js中用于简化父子组件之间双向数据绑定的重要工具，但在使用时需要注意其原理和限制条件。

实操

根据上面对于sync语法糖的介绍，我们在dialog显示和隐藏中要进行两种处理

第一步：

控制dialog的显示和隐藏，我们首先在子组件中使用v-show对于组建的显示与隐藏进行控制。

diglog.vue代码：

    ··· 

第二步：

在父组件中使用:visible.sync="visible"向子组件进行传值并且接收子组件回调。

App.vue的代码：

第三步：

diglog.vue代码：

效果

结语

  🎈🎈🎈观众老爷们是否学到如何封装diglog组件了嘛？希望本篇文章对观众老爷能起帮助。🎈🎈🎈