PreviewDialog组件中的插槽是做什么用的？ slot

Question

老师我在看您写的弹窗代码中有看到一个 的这个节点，但是我是在是不知道它是做什么用的。

老师，这个我有点费解，按钮是弹窗的一部分吧？当这个按钮被点击后就触发了span节点绑定的事件，事件会把是否显示visible这个值置为true这样整个弹窗就跳出来了，但是默认的时候这个弹窗是不显示的，照说按钮是弹窗的一部分的话，那这个按钮为什么会显示在界面上啊？

还有就是除了按照老师您这样将一个弹窗组件化，还有什么其他的办法可以组件化的吗？

我有个需求就是：当我判断表中的列对象在某个状态的时候跳出弹窗；当它的状态不满足时需要跳到其他的路由。能给个例子吗？

我自己写的代码如下，但是不知道这样合适吗？

<template>
  <span style="padding: 0 10px">
    <el-dialog :title="title" :visible.sync="visible" :modal="false">
      <el-form
        :model="formData"
        label-position="left"
        label-width="70px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="单位数">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="件数">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item v-if="data.status" label="生产日期">
          <el-date-picker
            v-model="formData.productDate"
            type="date"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visible = false">
          确定
        </el-button>
      </div>
    </el-dialog>
    <span @click="handleButtonClick">
      <slot />
    </span>
  </span>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      visible: false,
      formData: {
        productDate: ''
      }
    }
  },
  created() {
    this.formData = Object.assign({}, this.data) // copy object
  },
  methods: {
    handleButtonClick() {
      if (this.data.status) { // true 表示不需要打印合格证 跳出弹窗
        this.visible = true
      } else {
        this.$router.push('/srm/orderSelection')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>

Answer 1

Sam 2019-12-26 22:45:40

抱歉，这个问题没看到，所以回复晚了。

这里的 slot 的用途是让我们添加自定义按钮，如果不加 slot，那么这个组件的扩展性就很差了。这种做法是弹窗类需求的最佳实践，这样做的好处是将弹窗的显示与否完全与业务代码剥离。

你的实现我看过了，主要问题是组件与业务逻辑强耦合，这种实现方案是不推荐的，可以这样修改，主要改动是从父组件传入一个名为 needVisible 的 function，通过该方法来判定 visible 的值，大致逻辑如下：

handleButtonClick() {
   this.visible = this.needVisible();
}

而 needVisible 方法如下：

if (this.data.status) { // true 表示不需要打印合格证 跳出弹窗
  return true;
} else {
  this.$router.push('/srm/orderSelection')
  return false;
}

这样既提高了组件的扩展性，又降低了代码的耦合，比较推荐

• 提问者 SpringSecurity #1

  非常感谢！谢谢老师您的提议。

Answer 2

提问者 SpringSecurity 2019-12-20 10:14:36

老师，这个我有点费解