Vue.js VueJs：组件插槽作为属性

我已经阅读了文档，我不确定我试图实现的目标是否切实可行。 我想要的是组件的属性，它包含html标记，这显然会产生无效的html-因此我想知道是否有一种方法可以将html传递到组件中，并使用发出的事件进一步发送它。 最合适的方法是使用

命名槽

，但我认为我无法将命名槽的内容与内部属性相关联

我处理的组件是一个简单的确认对话框。触发器组件将封装两个插槽——一个用于标签，另一个用于我希望随事件一起发送到对话框组件的消息

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 || '');
    }, '');
}

目前，我的触发器组件如下所示：

<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>

现在只需传递和附加命名slot

slot=“message”

是否确实要删除“{{$subscriber->email}}”？
没有撤消！

您应该在

调用对话框

组件内部使用

v-html

将原始html从消息属性插入元素中

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

---

您应该在

调用对话框

组件内部使用

v-html

将原始html从消息属性插入到元素中

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

---

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

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元素（默认情况下）

• 如果未找到，则返回

  '

  空白字符串
• 如果找到一些，则迭代每个元素，如果找到，则连接它的

  文本

  属性，如果是
  标记，则连接它的

  \n

---

注意：

.reduce（…）

方法用于迭代/串联。或者，使用类似的箭头函数调用

.map（…）

，然后再调用

.join（“”）

可能会产生相同的结果。

我不得不对自定义按钮组件执行类似的操作

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元素（默认情况下）

• 如果未找到，则返回

  '

  空白字符串
• 如果找到一些，则迭代每个元素，如果找到，则连接它的

  文本

  属性，如果是
  标记，则连接它的

  \n

---

注意：

.reduce（…）

方法用于迭代/串联。或者，使用类似的箭头函数调用

.map（…）

，然后调用

.join（“”）

可能会产生相同的结果。

谢谢，但这不是我想要的-我没有使用它-我正在将它进一步传递给另一个组件。问题是如何将其作为属性传递，而不将其作为组件标记的属性。@SebastianSulinski创建一个计算属性，返回所需的字符串。然后将此计算属性作为值传递给您，如下所示：

：message=“myCreatedString”

抱歉-我一定没有解释清楚-我知道如何绑定属性等。它的值不会绑定到任何元素-它将与事件调度器一起调度-我需要在不使用属性的情况下将其传递到组件中-可能是命名插槽，但是，我怎样才能从组件中获取插槽的内容并与局部变量相关联。谢谢，但这不是我想要的-我没有使用它-我正在将它进一步传递给另一个组件。问题是如何将其作为属性传递，而不将其作为组件标记的属性。@SebastianSulinski创建一个计算属性，返回所需的字符串。然后将此计算属性作为值传递给您，如下所示：

：message=“myCreatedString”

抱歉-我一定没有解释清楚-我知道如何绑定属性等。它的值不会绑定到任何元素-它将与事件调度器一起调度-我需要在不使用属性的情况下将其传递到组件中-可能是命名插槽，但是，我如何从组件中获取插槽的内容并将其与局部变量关联。您可以将其存储在vuex中，并将key作为属性发送。您需要密钥才能在store中找到值。您可以将其存储在vuex中，并将密钥作为属性发送。您需要密钥来查找存储中的值