Vueではどのように関数をpropsとしてコンポーネントに伝達する実現コードですか？

この文章はGitHub https://github.com/qq44924588...にすでに収録されています。昔の賞賛の文章の分類もたくさん整理されています。Starと完璧を歓迎して、みんなは面接試験を参考にして復習して、私達がいっしょに少しのものがあることを望みます。
Vue初心者がよく聞くよくある質問です。文字列、配列、数字、およびオブジェクトはpropsとして渡されてもよい。しかし、一つの関数をpropsとして伝えてもいいですか？
関数はpropsとして伝達され得るが、このような方法は良くない。逆に、Vueはこの問題を解決するために設計された機能があります。
コンポーネントに関数を入力
関数または方法を取得し、プロップとしてサブアセンブリに渡すのは比較的簡単です。実際には、他の任意の変数方式を伝えるのと同じです。

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

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

前に述べたように、Vueの中ではいつまでもこのようなことをしないでください。
なぜですか？Vueはもっといいものがあります。
履歴書は項目がないと言われていますが、プロジェクトを探してくれました。
React vs Vue
Reactを使用すると、伝達関数の方式に慣れます。
Reactでは、1つの関数を親のコンポーネントからサブアセンブリに渡すことができ、サブアセンブリは親のコンポーネントと通信することができる。プロpsとdataは下に流れ，関数は上に流れるように呼び出される。
しかし、Vueには子供から父親への通信方式を実現するための異なるメカニズムがあり、Vueはイベントを使用する。
これはDOMの働き方と同じです。Reactに比べて、Vueのやり方はブラウザとの整合性が高いです。要素はイベントを送信し、これらのイベントを傍受することができる。
したがって、Vueでは関数をpropとして伝えることができますが、それは逆モードと考えられています。
イベントを使う
イベントは私たちがVueの中の親コンポーネントと通信する方式です。
ここでは、事件がどのように働いているかを簡単に説明する例があります。
まず、私たちはサブコンポーネントを作成します。サブコンポーネントは作成時にイベントを送信します。

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

親コンポーネントでは、このイベントを傍受します。

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

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

事件にできることはまだたくさんあります。これは毛皮だけです。強い提案は教程を立てるを見て、より多くの情報を知ることができます。絶対に読む価値があります。
しかし事件は私たちのすべての問題を完全に解決することはできません。
サブコンポーネントから親コンポーネントのスコープデータにアクセスします。
多くの場合、我々が解決しようとしている問題は、異なる作用領域からのデータへのアクセスである。
親コンポーネントには別の作用領域があります。
一般的に、私たちは親のコンポーネントからサブアセンブリの値にアクセスするか、または親のコンポーネントの値にサブアセンブリからアクセスすることを望む。Vueは私たちが直接こうするのを阻止するのはいいことです。
これは、私たちのコンポーネントをよりパッケージ化し、それらの再利用性を向上させます。これはコードをより簡潔にして、長い目で見て、多くの問題を避けました。
しかし、関数を通してこの問題を回避しようとする場合があります。
親から値を取得
サブアセンブリが親コンポーネントにアクセスする方法を望むなら、方法を直接プロモーションとして伝えるのは簡単であるようだ。
私たちは父のコンポーネントの中でこうします。

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

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

私たちのサブコンポーネントでは、着信方法を使用します。
このようにするとどんな問題がありますか？
これは完全に間違っているわけではないですが、このような状況で事件を使うほうがいいです。
そして、必要に応じて、サブコンポーネントは、関数を呼び出すことなく、イベントのみを発行する。次に、親コンポーネントは、イベントを受信し、この関数を呼び出し、スペルは、サブアセンブリのpropに更新される。
これは同じ効果を達成するためのより良い方法です。
他の場合、私たちは子供要素から親要素に値を取得したいかもしれません。このために関数を使用しました。
例えば、あなたはこのようにしているかもしれません。親関数は、サブ関数の値を受け取り、それを処理します。

<!-- Parent -->
<template>
 <ChildComponent :method="parentMethod" />
</template>
// Parent
export default {
 methods: {
 parentMethod(valueFromChild) {
  // Do something with the value
  console.log('From the child:', 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);
 }
}

これは全く間違っているわけではないので、このようにすればいいです。
ただ、これは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('From the child:', 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が提供する最も強力な機能の一つだと思います。
それらはサブスコープと親スコープの境界を弱めた。しかし、それは非常にきれいな方法で完成されています。私たちのコンポーネントは以前のように組み合わせられます。
もしあなたがもっと知りたいならば、作用域スロットはどのように仕事していますか？公式文書を見てみてもいいです。あるいは次回説明します。
コード展開後に存在する可能性のあるバグをリアルタイムで知ることができませんでしたが、後でこれらのバグを解決するために、多くの時間をかけてロゴの調整を行いました。
ソース：公式文書…
締め括りをつける
ここで、Vueの中でどのように関数をpropsとしてコンポーネントに伝達するかについての実現コードの文章を紹介します。これに関連して、より多くのvue propsがコンポーネントの内容に伝達されています。私達の以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。