PreviewDialog组件中的插槽是做什么用的？ slot
来源：14-11 电子书列表高级优化
SpringSecurity
2019-12-19
老师我在看您写的弹窗代码中有看到一个 的这个节点，但是我是在是不知道它是做什么用的。
老师，这个我有点费解，按钮是弹窗的一部分吧？当这个按钮被点击后就触发了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>
写回答
2回答
-
抱歉，这个问题没看到，所以回复晚了。
这里的 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; }这样既提高了组件的扩展性，又降低了代码的耦合，比较推荐
112019-12-27 -
SpringSecurity
提问者
2019-12-20
老师，这个我有点费解
00
