Vue.js - 以编程方式设置插槽内容

Question

有什么方法可以从组件内部设置/覆盖插槽的内容吗？喜欢

模板:

<div>
    <slot></slot>
</div>

JS:

export default {
    ...
     mounted() {
        this.$slot.render("<button>OK</button>");
     }
    ...
}

我知道我可以在我的元素上使用 v-html 将内容动态推送到组件模板中，但我的意思不仅仅是纯 HTML，我的意思是带有 Vue 指令的 HTML。喜欢:

JS:

export default {
    ...
     mounted() {
        this.$slot.default.render('<button @click="submit">OK</button>');
     },
    methods: {
        submit() {
            // Here I want to get :)
        }
    }
    ...
}

基本上，我希望 Vue 在我的组件范围内渲染(像解析和渲染，不像 innerHTML)某些字符串，并放在我组件的特定位置。原因是我通过 AJAX 从服务器获取新内容。

很抱歉，经过 2 天的谷歌搜索，我仍然无法理解。

非常感谢!

Answer 1

根据 this您可以以编程方式实例化组件并插入插槽内容。

import Button from 'Button.vue'
import Vue from 'vue'
var ComponentClass = Vue.extend(Button)
var instance = new ComponentClass({
    propsData: { type: 'primary' }
})
instance.$slots.default = [ 'Click me!' ]
instance.$mount() // pass nothing
this.$refs.container.appendChild(instance.$el)