Vue 문서에서 슬롯 기능을 사용하는 방법-View.js-php.cn

Vue 문서에서 슬롯 기능을 사용하는 방법

PHPz

풀어 주다： 2023-06-21 20:31:07

원래의

1427명이 탐색했습니다.

Vue는 대화형 웹 인터페이스를 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue 구성 요소는 Vue 애플리케이션을 구축하기 위한 기본 단위이며 HTML 템플릿, CSS 스타일 시트 및 JavaScript 코드를 제공하는 재사용 가능한 코드 블록입니다. Vue의 슬롯은 하위 구성 요소의 콘텐츠를 상위 구성 요소에 삽입하는 데 사용되는 특수 구성 요소입니다. 슬롯 기능은 슬롯을 더욱 유연하고 사용하기 쉽게 만드는 데 유용한 기술입니다. 이 글에서는 Vue 문서에서 슬롯 기능을 사용하는 방법을 소개합니다.

슬롯 개요

슬롯은 상위 구성 요소가 하위 구성 요소의 콘텐츠를 삽입할 수 있도록 하는 특수 구성 요소입니다. 슬롯은 템플릿 로직의 재사용은 물론 더 복잡한 구성요소화를 구현하는 데 사용될 수 있습니다. Vue에서 슬롯은 상위 구성 요소의 템플릿에만 이름이 있는 요소에 의해 정의되며 실제 콘텐츠는 하위 구성 요소에 정의됩니다. 예:

<!-- 父级组件中的模板 -->
<template>
  <div>
    <h1>我是父级组件</h1>
    <slot></slot>
  </div>
</template>

로그인 후 복사

이 예에서는 상위 구성 요소의 요소가 비어 있으므로 실제 콘텐츠는 하위 구성 요소에 정의됩니다. 예:

<!-- 子级组件中的模板 -->
<template>
  <p>我是子级组件的内容</p>
</template>

로그인 후 복사

상위 및 하위 구성 요소가 렌더링되면 하위 구성 요소의 콘텐츠가 아래와 같이 상위 구성 요소의 템플릿에 삽입됩니다.

<!-- 渲染后的结果 -->
<div>
  <h1>我是父级组件</h1>
  <p>我是子级组件的内容</p>
</div>

로그인 후 복사

슬롯 기능 개요

Vue는 제공합니다. 삽입 슬롯 함수, 슬롯에서 JavaScript 로직을 실행하는 데 사용됩니다. 슬롯 기능은 상위 구성 요소에 정의된 다음 사용하기 위해 하위 구성 요소에 전달됩니다. 슬롯 함수는 슬롯의 데이터뿐만 아니라 상위 및 하위 구성 요소의 속성과 메서드에도 액세스할 수 있습니다. 슬롯 기능에서는 DOM 요소 작동, 비동기 요청 시작, 애니메이션 수행 등과 같은 모든 JavaScript 코드를 작성할 수 있습니다. 예:

<!-- 父级组件中的模板和插槽函数 -->
<template>
  <div>
    <h1>我是父级组件</h1>
    <slot :data="myData" :do-something="doSomething"></slot>
  </div>
</template>
<script>
export default {
  data () {
    return {
      myData: '我是父级组件的数据'
    }
  },
  methods: {
    doSomething () {
      console.log('执行一些操作')
    }
  }
}
</script>

로그인 후 복사

이 예에서 상위 구성 요소는 myData라는 데이터 속성과 doSomething이라는 메서드를 정의합니다. 이러한 속성과 메서드는 슬롯을 통해 하위 구성 요소에 전달됩니다.

슬롯 기능도 하위 구성 요소에서 정의한 다음 슬롯에 바인딩해야 합니다. 예:

<!-- 子级组件中的模板和插槽函数 -->
<template>
  <div>
    <h2>我是子级组件</h2>
    <slot :data="slotData" :do-something="slotDoSomething">
      我是插槽的默认内容
    </slot>
  </div>
</template>
<script>
export default {
  data () {
    return {
      slotData: '我是插槽的数据'
    }
  },
  methods: {
    slotDoSomething () {
      console.log('执行一些操作')
    }
  }
}
</script>

로그인 후 복사

이 예에서 하위 구성 요소는 SlotData라는 데이터 속성과 SlotDoSomething이라는 메서드를 정의합니다. 이러한 속성과 메서드는 슬롯을 통해 상위 구성 요소에 전달됩니다. 슬롯에 콘텐츠가 제공되지 않으면 기본 콘텐츠가 사용됩니다.

슬롯 기능 사용

슬롯 기능은 슬롯의 모든 JavaScript 로직을 실행할 수 있어 슬롯을 더욱 유연하고 사용하기 쉽게 만듭니다. 예를 들어 슬롯 기능에서 DOM 요소를 조작하고, 비동기 요청을 시작하고, 애니메이션을 수행하는 등의 작업을 수행할 수 있습니다. 슬롯 함수에서 this 키워드를 사용하여 상위 및 하위 구성 요소의 속성과 메서드에 액세스할 수 있습니다. 예:

<slot v-bind:user="user" v-bind:edit="edit">
  <button @click="editUser">编辑用户</button>
</slot>

<script>
export default {
  data () {
    return {
      user: {
        name: 'John Doe',
        email: 'john.doe@example.com'
      }
    }
  },
  methods: {
    editUser () {
      this.user.name = 'Jane Doe'
      this.user.email = 'jane.doe@example.com'
    },
    edit () {
      console.log('执行编辑操作')
    }
  }
}
</script>

로그인 후 복사

이 예에서 상위 구성 요소는 user라는 데이터 속성과 user editUser라는 데이터 속성을 정의합니다. 방법. 슬롯에는 편집 작업을 실행하는 데 사용되는