VueJs：组件槽作为属性

Question

我已经阅读了文档，但我不确定我想要实现的目标是否真的可行。 我所追求的是包含 html 标签的组件属性，这显然会产生无效的 html - 因此我想知道是否有一种方法可以将 html 传递到组件中并通过发出的事件进一步发送它。 最合适的方法是named slot ，但我认为我不能将命名 slot 的内容与内部属性相关联。

我处理的组件是一个简单的确认对话框。 触发器组件将包装两个插槽 - 一个用于标签，另一个用于我想与事件一起分派给对话框组件的消息。

我的触发器组件目前看起来像这样：

<template>
    <a :class="cssClass" @click="clicked()">
        <slot></slot>
    </a>
</template>
<script>
    export default {
        props: {
            id: {
                type: String,
                required: true
            },
            route: {
                type: String,
                required: true
            },
            message: {
                type: String,
                required: true
            },
            cssClass: {
                type: String,
                required: false
            }
        },
        mounted() {
            window.EventHandler.listen('confirm-dialog-' + this.id + '-called', () => {
                window.location.reload(true);
            });
        },
        methods: {
            clicked() {
                window.EventHandler.fire('top-confirm', {
                    id: 'confirm-dialog-' + this.id,
                    message: this.message,
                    url: this.route
                });
            }
        }
    };
</script>

当添加到 html 中时：

<call-dialog
    route="{{ route('subscriber.destroy', $subscriber->id) }}"
    css-class="alert"
    id="{{ $subscriber->id }}"
    message="Are you sure you wish to remove '{{ $subscriber->email }}'?<br />There is no undo!"
>
   <i class="fa fa-trash"></i> Remove
</call-dialog>

如您所见，目前我正在使用message prop 传递消息，但是这个特定的包含<br />标签，这会产生无效的 html。

知道如何解决这个问题吗？

笔记

我想我已经找到了使用命名插槽的方法：

<template>
    <a :class="cssClass" @click.prevent="clicked()">
        <slot name="label"></slot>
    </a>
</template>
<script>
    export default {
        props: {
            id: {
                type: String,
                required: true
            },
            route: {
                type: String,
                required: true
            },
            cssClass: {
                type: String,
                required: false
            }
        },
        mounted() {
            window.EventHandler.listen('confirm-dialog-' + this.id + '-called', () => {
                window.location.reload(true);
            });
        },
        methods: {
            message() {
                 return this.$slots.message[0].context.message;
            },
            clicked() {
                window.EventHandler.fire('top-confirm', {
                    id: 'confirm-dialog-' + this.id,
                    message: this.message(),
                    url: this.route
                });
            }
        }
    };
</script>

现在只需传递和附加命名插槽slot="message"

<call-dialog
    route="{{ route('subscriber.destroy', $subscriber->id) }}"
    css-class="alert"
    id="{{ $subscriber->id }}"
>
    <span slot="label"><i class="fa fa-trash"></i></span>
    <span slot="message">Are you sure you wish to remove '{{ $subscriber->email }}'?<br />There is no undo!</span>
</call-dialog>

Answer 1

您应该在call-dialog组件中使用v-html将原始 HTML 从 message 道具插入到元素中。

<div v-html="message"></div>

https://v2.vuejs.org/v2/api/#v-html

Answer 2

我不得不为自定义按钮组件做类似的事情。

Vue.prototype.$getSlotText = function( name = 'default' ) {
    const htmlElements = this.$slots[name];
    if(!htmlElements || !htmlElements.length) return '';

    return htmlElements.reduce((fullText, {tag, text}) => {
        return fullText + (tag === 'br' ? '\n' : text || '');
    }, '');
}

本质上，这将访问“默认”插槽上的 HTML 元素（默认情况下）。

• 如果没有找到，则返回''空白字符串。
• 如果找到一些，则遍历每个元素，如果找到则连接它的text属性，或者如果它是<br/>标记则连接\n 。

注意： .reduce(...)方法用于迭代/连接。 或者，使用类似箭头函数的.map(...)调用，后跟.join('')可能会产生相同的结果。