Vue ドキュメントでのスロット関数の使用方法-Vue.js-php.cn

Vue ドキュメントでのスロット関数の使用方法

PHPz

リリース： 2023-06-21 20:31:07

オリジナル

1403 人が閲覧しました

Vue は、インタラクティブな Web インターフェイスを構築するための人気のある 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>

ログイン後にコピー

Slot関数の概要

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 という名前のデータ属性と、 editUser というメソッド。スロットには、編集操作をトリガーするために使用される