Vue JSのエミット関数

DDD
リリース: 2024-11-19 18:07:03
オリジナル
243 人が閲覧しました

子コンポーネントから親コンポーネントにデータを渡すために Emit 関数を使用し、それがコード内でどのように行われるかを説明します
子コンポーネントからEmit関数を開始します

    <div>
        <div>



<p>これで、それらを親コンポーネントに渡すことができます<br>
</p>

<pre class="brush:php;toolbar:false">
    <div>
        <div>



<p>結果は</p>

<p><img src="https://img.php.cn/upload/article/000/000/000/173201082567193.jpg" alt="Vue JS Emit function"></p>

<p>仕組みを学びましょう</p>

<p>- "vue" から {defineEmits, ref} をインポートします。 vueから必要なものをインポート<br>
- const count=ref(0);変数を作成し、ref <br> でデフォルト値を指定します。
<br>
- const Emit=defineEmits();任意の検証可能な<br>でdefineEmitsを宣言する必要があります
- const users=[<br>
    {id:1、名前:「クシ」、年齢:20、職業:「IT」}、<br>
    {id:1、名前:「クシ」、年齢:20、職業:「IT」}、<br>
    {id:1、名前:「クシ」、年齢:20、職業:「IT」}、<br>
    {id:1、名前:「クシ」、年齢:20、職業:「IT」}、<br>
] 任意のデータからの使用<br>
- const sendDate=()=>{<br>
    Emit("カウンター", 11);<br>
    Emit("ユーザー", ユーザー);<br>
関数を作成し、最初のオプションの番号と2番目のデータをdefineEmits内のデータに指定し、文字列に親コンポーネント<br>で使用するためのオプションの名前を書き込みます。
そして、親コンポーネントでそれらを呼び出す方法を学びます</p>

<p>-const submitEmit=(e)=>{<br>
    console.log(e);<br>
    Emit("カウンター", e) <br>
}<br>
-const submitUser=(e)=>{<br>
    console.log(e);<br>
    Emit("ユーザー", e);<br>
2 つの関数が作成され、その中で子コンポーネントから Emit 変数を呼び出し、その名前と e を与えます。この場合、e=オプションの数字 11 とデータ<br>
- <ComponentD @counter="submitEmit" @users="submitUser"/>最後に、オプション名を発行して 2 つの関数を呼び出し、結果をコンソールで確認できます</p>

<p>ご注目いただきありがとうございます</p>


          </div>

            
        
ログイン後にコピー

以上がVue JSのエミット関数の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のおすすめ
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート