props は vue で関数を渡すことができますか?

vue のプロパティは関数を渡すことができます。vue では文字列、配列、数値、オブジェクトをプロパティとして渡すことができます。プロパティは主にコンポーネントに値を渡すために使用されます。目的は、コンポーネントから渡されたデータを受け取ることです。構文は「export default {methods: {myFunction() {// ...}}};」です。

このチュートリアルの動作環境: Windows 10 システム、Vue3 バージョン、Dell G3 コンピューター。

vue の Props 転送関数

Vue の初心者からよく聞かれる一般的な質問。文字列、配列、数値、オブジェクトは props として渡すことができます。しかし、関数を props として渡すことはできますか?

関数を props として渡すことは可能ですが、これは良くありません。それどころか、Vue にはこの問題を解決するために特別に設計された機能があります。次に見てみましょう。

関数をコンポーネントに渡す

関数またはメソッドを取得し、それを prop として子コンポーネントに渡すのは比較的簡単です。実際、これは他の変数を渡すのとまったく同じように機能します。

<template>
  <ChildComponent :function="myFunction" />
</template>

export default {
  methods: {
    myFunction() {
      // ...
    }
  }
};

前に述べたように、Vue ではこのようなことは決して行わないでください。 ＃＃＃＃＃＃なぜ？ Vue にはもっと優れた機能があります。

React と Vue

React を使用したことがある場合は、関数を渡すことに慣れているでしょう。

React では、子コンポーネントが親コンポーネントと上位に通信できるように、親コンポーネントから子コンポーネントに関数を渡すことができます。 Props とデータは下方向に流れ、関数呼び出しは上方向に流れます。

ただし、Vue には子から親への通信を実装するための別のメカニズムがあり、Vue はイベントを使用します。

これは DOM の動作方法と同じです。Vue の方法は React よりもブラウザーとの一貫性が高くなります。要素はイベントを発行したり、これらのイベントをリッスンしたりできます。

したがって、Vue では関数を props として渡すことは可能ですが、これはアンチパターンとみなされます。

イベントの使用

イベントは、Vue で親コンポーネントと通信する方法です。

ここに、イベントがどのように機能するかを示す短い例を示します。

まず、作成時にイベントを発行するサブコンポーネントを作成します:

// ChildComponent
export default {
  created() {
    this.$emit('created');
  }
}

親コンポーネントで、イベントをリッスンします:

<template>
  <ChildComponent @created="handleCreate" />
</template>

export default {
  methods: {
    handleCreate() {
      console.log(&#39;Child has been created.&#39;);
    }
  }
};

Event たくさんあります。もっとできることはありますが、これは表面をなぞっただけです。詳細については、Vue の公式ドキュメントを参照することを強くお勧めします。間違いなく読む価値があります。

しかし、イベントによってすべての問題が完全に解決されるわけではありません。

子コンポーネントから親コンポーネントのスコープ内のデータへのアクセス

多くの場合、解決しようとしている問題は、異なるスコープからのデータへのアクセスです。

親コンポーネントには 1 つのスコープがあり、子コンポーネントには別のスコープがあります。

通常、親コンポーネントから子コンポーネントの値にアクセスしたり、子コンポーネントから親コンポーネントの値にアクセスしたりする必要があります。 Vue ではこれを直接行うことができませんが、これは良いことです。

これにより、コンポーネントがよりカプセル化され、再利用性が向上します。これにより、コードがよりクリーンになり、長期的には多くの問題を回避できます。

しかし、関数を使用してこの問題を回避しようとする場合もあります。

「親クラスから値を取得する」

子コンポーネントが親コンポーネントのメソッドにアクセスできるようにする場合は、そのメソッドを prop として直接渡します。シンプルかつ明確に思えます。

親コンポーネントでこれを行います:

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod() {
      // ...
    }
  }
}

子コンポーネントで、渡されたメソッドを使用します:

// Child
export default {
  props: {
    method: { type: Function },
  },
  mounted() {
    // Use the parent function directly here
    this.method();
  }
}

これを行う場合、どのような問題がありますか?

これは完全に間違っているわけではありませんが、この場合はイベントを使用する方が良いでしょう。

その後、必要に応じて、子コンポーネントは関数を呼び出すのではなく、イベントを発行するだけです。親コンポーネントはイベントを受信して​​関数を呼び出し、アセンブリは子コンポーネントに渡されたプロパティを更新します。

これは、同じ効果を達成するためのより良い方法です。

他の場合には、子要素から親要素に値を取得する必要があり、これには関数を使用します。

たとえば、次のようにするかもしれません。親関数は子関数の値を受け入れて処理します。

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod(valueFromChild) {
      // Do something with the value
      console.log(&#39;From the child:&#39;, valueFromChild);
    }
  }
}

子コンポーネントで受信メソッドを呼び出し、子コンポーネントの値をメソッドのパラメータとして渡します。

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: 'I am the child.' };
  },
  mounted() {
    // Pass a value to the parent through the function
    this.method(this.value);
  }
}

This それは完全に間違っているわけではなく、機能します。

これは、Vue でこれを行う最良の方法ではないというだけです。代わりに、イベントの方が問題を解決するのに適しています。イベントを使用してまったく同じことを実現できます

<!-- Parent -->
<template>
  <ChildComponent @send-message="handleSendMessage" />
</template>

// Parent
export default {
  methods: {
    handleSendMessage(event, value) {
      // Our event handler gets the event, as well as any
      // arguments the child passes to the event
      console.log(&#39;From the child:&#39;, value);
    }
  }
}

子コンポーネントでイベントを発行します:

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: 'I am the child.' };
  },
  mounted() {
    // Instead of calling the method we emit an event
    this.$emit('send-message', this.value);
  }
}

イベントは Vue では非常に便利ですが、問題を 100% 解決するわけでもありません。場合によっては、別の方法で親から子のスコープにアクセスする必要があります。

このために、スコープ付きスロットを使用します。

スコープ スロットの使用

スコープ スロットはより高度なトピックですが、非常に便利です。実際、これらは Vue が提供する最も強力な機能の 1 つだと思います。

これらは、子スコープと親スコープの間の境界を弱めます。ただし、これは非常にクリーンな方法で行われ、コンポーネントは以前と同じように構成可能になります。

スコープ スロットの仕組みについて詳しく知りたい場合は、まず公式ドキュメントを読むか、次回説明します。

[関連する推奨事項:「vue.js チュートリアル 」]

以上がprops は vue で関数を渡すことができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。