為什么使用vue的作用域插槽？什么時候使用？

本篇文章帶大家詳細了解一下vue的作用域插槽。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

Vue插槽是一種將內容從父組件注入子組件的絕佳方法。

下面是一個基本的示例，如果我們不提供父級的任何slot位的內容，剛父級<slot>中的內容就會作為后備內容。

// ChildComponent.vue <template>   <div>      <slot> Fallback Content </slot>   </div> </template>

然后在我們的父組件中:

// ParentComponent.vue <template>    <child-component>       Override fallback content    </child-component> </template>

編譯后，我們的DOM將如下所示。

<div> Override fallback content </div>

我們還可以將來自父級作用域的任何數據包在在 slot 內容中。 因此，如果我們的組件有一個名為name的數據字段，我們可以像這樣輕松地添加它。

<template>    <child-component>       {{ text }}     </child-component> </template>  <script> export default {    data () {      return {        text: 'hello world',      }    } } </script>

【