Vue에서 슬롯 범위를 사용하는 방법

Vue.js의 슬롯 범위 속성을 사용하면 지정된 범위 변수를 통해 슬롯 내에서 데이터를 전달할 수 있습니다. 구체적인 사용 방법은 다음과 같습니다. 슬롯 범위 속성과 슬롯 요소에서 데이터를 수신하기 위한 변수 이름을 지정하고 상위 구성 요소의 v-slot을 사용하여 데이터를 전달합니다.

Vue.js에서 슬롯 범위 사용

슬롯 범위 속성을 사용하면 슬롯을 사용할 때 데이터를 전달할 수 있으므로 슬롯 내의 데이터를 사용할 수 있습니다. 슬롯 외부의 데이터에 액세스하기 위해 슬롯 템플릿에 범위를 만듭니다.

Usage

슬롯 외부의 데이터를 수신하기 위한 변수 이름을 지정하려면 <slot> 요소의 slot-scope 속성을 ​​사용하세요. 예: <slot> 元素上使用 slot-scope 属性，指定一个变量名来接收插槽外的数据。例如：

<code class="html"><slot name="header" slot-scope="headerData">
  <h1>{{ headerData.title }}</h1>
</slot></code>

然后，在父组件中，使用 v-slot

<code class="html"><template>
  <div>
    <slot name="header" v-slot="headerData">
      headerData: {{ headerData }}
    </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      headerData: {</code>

그런 다음 상위 구성 요소에서 v-slot 슬롯 속성을 사용하여 데이터를 슬롯에 전달합니다. 예: 🎜rrreee

위 내용은 Vue에서 슬롯 범위를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!