❝

无所谓了

反正我都是独自一个人

❞

前言

• 你好
• 你好
• 吃饭了吗？
• 吃了
• 吃的什么啊？
• 肠粉
• 还有呢？
• 绿豆沙
• 吃完了吗？
• 准备走了
• 怎么走
  ...

就这，就这，还能聊这么久？
还想不想好好聊天呀！
要是你不会，跟我一起聊聊今天的dialog

1 Dialog

双向绑定 .sync

代码片段

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
  ...
</el-dialog>

hide(cancel) {
  if (cancel !== false) {
    this.$emit('update:visible', false);
    ...
  }
}

技巧解析

❝

双向绑定不仅仅只有v-model喔
.sync也可以
1.属性visible.sync传入组件
2.组件内接收prop属性visible
3.使用update:visible事件，更新visible
原本，不可更改的prop，这样也可以更改啦

.sync修饰符 传送门

❞

组件更新 key

<div
  role="dialog"
  :key="key"
  ...
  :style="style">
  ...
</div>

watch: {
  visible(val) {
    if (val) {
      ...
    } else {
      ...
      if (this.destroyOnClose) {
        this.$nextTick(() => {
          this.key++;
        });
      }
    }
  }
},

技巧解析

❝

组件缓存是为了提升效率， 所以组件默认会复用，这也导致了很多时候表单无法同步更新
所以，怎么让组件更新呢？
1.强制刷新$forceUpdate
2.重新挂载 v-if
还有吗？
还可以更新key值啊

Vue组件强制刷新 传送门
Vue中关于路由和组件缓存 传送门

❞

动态挂载

mounted() {
  if (this.visible) {
    this.rendered = true;
    this.open();
    if (this.appendToBody) {
      document.body.appendChild(this.$el);
    }
  }
}

技巧解析

❝

导入一个组件，默认挂载在当前页面
只能挂载在当前页面吗？
也不一定！
可以在mouted阶段，重新挂载
好一个动态挂载

❞

「如果有一天真的失去了最珍贵的朋友」 「至少也要交换一些关于她的片段」

参考链接

• element官网
• element代码仓库
• vue官网
• ES6入门教程

往期回顾

• 跟随Element学习Vue小技巧(1)——Layout
• 跟随Element学习Vue小技巧(2)——Container
• 跟随Element学习Vue小技巧(7)——Button
• 跟随Element学习Vue小技巧(8)——Link
• 跟随Element学习Vue小技巧(9)——Radio
• 跟随Element学习Vue小技巧(10)——Checkbox
• 跟随Element学习Vue小技巧(11)——Input
• 跟随Element学习Vue小技巧(12)——InputNumber
• 跟随Element学习Vue小技巧(13)——Select
• 跟随Element学习Vue小技巧(14)——Cascader
• 跟随Element学习Vue小技巧(15)——Switch
• 跟随Element学习Vue小技巧(16)——Slider
• 跟随Element学习Vue小技巧(17)——TimePicker
• 跟随Element学习Vue小技巧(18)——DatePicker
• 跟随Element学习Vue小技巧(20)——Upload
• 跟随Element学习Vue小技巧(21)——Rate
• 跟随Element学习Vue小技巧(23)——Transfer
• 跟随Element学习Vue小技巧(24)——Form
• 跟随Element学习Vue小技巧(25)——Table
• 跟随Element学习Vue小技巧(26)——Tag
• 跟随Element学习Vue小技巧(27)——Progress
• 跟随Element学习Vue小技巧(28)——Tree
• 跟随Element学习Vue小技巧(29)——Pagination
• 跟随Element学习Vue小技巧(31)——Avatar
• 跟随Element学习Vue小技巧(33)——Loading
• 跟随Element学习Vue小技巧(34)——Message
• 跟随Element学习Vue小技巧(36)——Notification
• 跟随Element学习Vue小技巧(37)——Menu
• 跟随Element学习Vue小技巧(38)——Tabs
• 跟随Element学习Vue小技巧(39)——Breadcrumb
• 跟随Element学习Vue小技巧(41)——Dropdown
• 跟随Element学习Vue小技巧(42)——Steps