vue3 コンポーネント開発に共通する API の知識ポイントは何ですか?

#コンポーネントベースの考え方

なぜコンポーネントベースの開発を使用するのでしょうか?

Vue React などの現在人気のあるフロントエンド フレームワークは、コンポーネントを記述することによってビジネス要件を完了します。これはコンポーネントベースの開発です。小さなプログラム開発も含めて、コンポーネント開発の考え方も活かされます。

コンポーネント化されたアイデアを分析してアプリケーションを開発する:

• ページ全体を多数の小さなコンポーネントに分割します

• それぞれ 各コンポーネントが使用されますページの機能モジュールを完成させるために使用します。さまざまなページ

• ##Vue

  ページは、ネストされたコンポーネント ツリーのように構成する必要があります。

vue3

エントリ ファイル:

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

createApp()

この関数は

App を渡します。

App

はコンポーネントであり、ルートです。プロジェクトのコンポーネント。 以下では、

Vue3

でのコンポーネント開発の一般的な方法を分析します。 #コンポーネント通信$props

##$props

データをサブコンポーネントに渡すために使用されます

<p> $props: {{$props}} </p>

プロパティを取得するには、
• defineProps

  Api を使用する必要があります

  const props = defineProps({
    num: Number,
  })

  ##糖衣構文内 #$emits

• ##$emit

  親コンポーネントを呼び出すために使用されるメソッド<pre class="brush:php;toolbar:false">&lt;button @click=&quot;$emit(&amp;#39;add&amp;#39;)&quot;&gt; add &lt;/button&gt;</pre>

で

defineEmits

Api ステートメント Emits

• ##

  <button @click="add">{{ num }}</button>
  
  const emits = defineEmits([&#39;add&#39;])
  function add() {
    emits(&#39;add&#39;)
  }

  $parent

を使用する必要があります。糖衣構文

$parent
• は、親コンポーネントのインスタンス オブジェクトを取得するために使用されます。
  コンポーネント インスタンスは公開されず、テンプレート内で
$parent

を直接使用すると空のオブジェクトが返されます。 。

• バリデーターを使用した vue について: VeeValidate3
• Vue の計算とメソッドの違いは何ですか?
• vueプロジェクトでEslint検証をオフにする方法の紹介
• Vue.js でコンポーネント テンプレートを定義するいくつかの方法の紹介
• Vue アプリケーションに AJAX を実装する 4 つの場所