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

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

下面是一個(gè)基本的示例，如果我們不提供父級(jí)的任何slot位的內(nèi)容，剛父級(jí)<slot>中的內(nèi)容就會(huì)作為后備內(nèi)容。

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

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

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

【