Vue.js - 以編程方式設置插槽內容

有沒有什麼方法可以在組件內設置/覆蓋插槽的內容？像Vue.js - 以編程方式設置插槽內容

模板：

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

JS：

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

我知道我可以在我的元素來動態地將內容推到組件模板上使用v-html，但我的意思不只是純HTML我的意思是HTML用Vue指令。像：

JS：

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

基本上我想Vue的渲染（如解析和渲染，而不是像innerHTML）在我的組件的範圍一定的字符串，並把在某一點在我的組件。原因是我通過AJAX從服務器獲取新內容。

對不起，但在Google搜索2天后，我仍然無法找到我的頭。

非常感謝！

來源

2017-06-20 grafa

大概不會。您最好的機會是在創建實際對象之前構建組件模板字符串（但不支持任何更改）。這是一個非常糟糕的解決方案，所以你很可能應該考慮重構你的應用程序。 – Cobaltway

感覺有點像對框架的工作 – keksnicoh

我認爲這是您最好的機會：即時創建您的組件。在這個例子中，我使用了一個簡單的佔位符（用v-cloak）。

使用vue-router可以在執行過程中添加新創建的組件，使用router.addRoutes，您可以獲得更好的結果，因此您的應用程序無需等待實例化整個vue。

function componentFactory(slot) { 
 
    return new Promise((resolve, reject) => { 
 
    window.setTimeout(() => { // Asynchronous fetching 
 
     resolve({ // Return the actual component 
 
     template: `<div> 
 
      ${slot} 
 
      </div>`, 
 
     methods: { 
 
      submit() { 
 
      console.log('hello'); 
 
      } 
 
     } 
 
     }); 
 
    }, 1000); 
 
    }); 
 
} 
 

 
componentFactory('<button @click="submit">OK</button>') // Build the component 
 
    .then(component => { 
 
    new Vue({ // Instantiate vue 
 
     el: '#app', 
 
     components: { 
 
     builtComponent: component 
 
     } 
 
    }); 
 
    });

[v-cloak], .placeholder { 
 
\t display: none; 
 
} 
 

 
[v-cloak] + .placeholder { 
 
\t display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 

 
<div id='app' v-cloak> 
 
    <built-component></built-component> 
 
</div> 
 
<div class="placeholder"> 
 
    This is a placeholder, my vue app is loading... 
 
</div>

來源

2017-06-20 08:53:48 Cobaltway

Vue.js - 以編程方式設置插槽內容

回答

相關問題