Vue h関数の使い方の詳しい説明

 // @returns {VNode}
h(
    // {文字列 | オブジェクト | 関数} タグ
    // HTML タグ名、コンポーネント、非同期コンポーネント、または // 機能コンポーネント。
    //
    // 必須。
    'div',

    // {オブジェクト} プロパティ
    // 属性、プロパティ、イベントに対応するオブジェクト。
    // これはテンプレートで使用されます。
    //
    // オプション（開発中は渡すことをお勧めします。渡す必要がない場合は null を渡します）
    {},

    // {文字列 | 配列 | オブジェクト} 子
    // `h()` を使用して構築されたサブ VNode、
    // または、文字列を使用して「テキスト VNode」またはスロットを持つオブジェクトを取得します。
    //
    // オプション。
    [
        「テキストが先に来ます。」
        h('h1', '見出し'),
        h(MyComponent, {
            いくつかのプロパティ: 'foobar'
        })
    ]
）

<スクリプト>
/* スタイルを設定するには、ここでインポートする必要があります。スタイルタグを使用する場合、scoped を記述できず、ローカルスタイルの設定に役立たないため、推奨されません */
「./style.css」をインポートします
"vue" から { h, ref } をインポートします。

エクスポートデフォルト{
    // データの書き込み方法 // data() {
    // 戻る {
    // カウンター: 0
    // }
    // },
    設定（） {
        定数カウンタ = ref(0)
        戻り値 { カウンター }
    },
    /**
     * セットアップを使用する場合、以下でもこれを使用できます。レンダリングのインポートにはこの境界があるため、次の値ではこれを使用する必要があります。
     */
    与える（） {
        h("div", null, [ を返します。
            h("h1", null, `現在のカウント: ${this.counter}`),
            h("button", { onClick: () => this.counter++, class: "button" }, "1を追加"),
            h("button", { onClick: () => this.counter--, class: "button" }, "マイナス1")
        ])
    }
}
</スクリプト>

 <スクリプト>
/* スタイルを設定するには、ここでインポートする必要があります。スタイルタグを使用する場合、scoped を記述できず、ローカルスタイルの設定に役立たないため、推奨されません */
「./style.css」をインポートします
"vue" から { h, ref } をインポートします。

エクスポートデフォルト{
    // データの書き込み方法 // data() {
    // 戻る {
    // カウンター: 0
    // }
    // },
    設定（） {
        定数カウンタ = ref(0)
        戻り値 () => {
            h("div", null, [ を返します。
                h("h1", null, `現在のカウント: ${counter.value}`),
                h("button", { onClick: () => counter.value++, class: "button" }, "1を追加"),
                h("button", { onClick: () => counter.value--, class: "button" }, "マイナス1")
            ])
        }
    }
}
</スクリプト>

<スクリプト>
"vue" から { h, ref } をインポートします。
「./components/Test.vue」からテストをインポートします。
エクスポートデフォルト{
    設定（） {
        戻る {}
    },
    与える（） {
        h(Test, null, { を返す
            // default は関数に対応し、default はデフォルト スロットです。default: props => h("span", null, "親によってコンポーネントに渡されるコンテンツ:" + props.name)
        })
    }
}
</スクリプト>

<スクリプト>
"vue" から { h } をインポートします。

エクスポートデフォルト{
    /**
     * 夫から渡された内容を受け取る */
    与える（） {
        h("div", null, [ を返します。
            h("div", null, "私は子コンポーネントです"),
            /**
             * ここで、他のものが渡されたかどうかを判断できます * 何も表示しない場合は null と書くこともできます * パラメータを渡す関数を使用して、パラメータを渡すこともできます */
            this.$slots.default ? this.$slots.default({ name: "哈哈哈哈" }) : h("div", null, "私は子コンポーネントのデフォルト値です")
        ])
    }
}
</スクリプト>

 npm で @vue/babel-plugin-jsx をインストール -D

モジュール.エクスポート = {
    プリセット: [
        "@/vue/cli-plugin-babel/プリセット"
    ]、
    プラグイン: [
        "@vue/babel-plugin-jsx"
    ]
}

<スクリプト>
'vue' から { ref } をインポートします
エクスポートデフォルト{
    設定（） {
        カウンタ = ref(0) とします
        戻り値 { カウンター }
    },
    与える（） {
        戻る （
            <div>
                <div>JSX の使用</div>
                <h2>現在の番号: {this.counter}</h2>
            </div>


        ）
    }
}
</スクリプト>

<スクリプト>
'@vue/reactivity' から { ref } をインポートします。

エクスポートデフォルト{
    設定（） {
        カウンタ = ref(0) とします
        関数add(){
            カウンタ値++
        }
        関数デクリメント() {
            カウンタ値--
        }
        戻り値 { カウンタ、加算、減算 }
    },
    与える（） {
        戻る （
            <div>
                <div>JSX の使用</div>
                <h2>現在の番号: {this.counter}</h2>
                <button onClick={this.add}>1 を追加</button>
                <button onClick={this.decrement} >1 減らす</button>
            </div>
        ）
    }
}
</スクリプト>

<スクリプト>
'@vue/reactivity' から { ref } をインポートします。
「./components/Test.vue」からテストをインポートします。
エクスポートデフォルト{
    設定（） {
        カウンタ = ref(0) とします
        関数add(){
            カウンタ値++
        }
        関数デクリメント() {
            カウンタ値--
        }
        戻り値 { カウンタ、加算、減算 }
    },
    与える（） {
        戻る （
            <div>
                <div>JSX の使用</div>
                このブロックがセットアップで変数またはメソッドを使用する場合は、これを追加します */
                <h2>現在の番号: {this.counter}</h2>
                <button onClick={this.add}>1 を追加</button>
                <button onClick={this.decrement} >1 減らす</button>
                <時間 />
                <テスト>
                    渡されたコンテンツをここに書き込みます。つまり、スロットに渡します。*/
                    {{ default: props => <p>親から子に渡されます</p> }}
                </テスト>
            </div>
        ）
    }
}
</スクリプト>

<スクリプト>
エクスポートデフォルト{
    /**
     * 夫から渡された内容を受け取る */
    与える（） {
        戻る （
            <div>
                <p>私はコンポーネントです</p>
                この作品は着用されない可能性があり、デフォルト値を表示する必要があります。この場合、三項演算子を使用する必要があります*/
                {this.$slots.default()}
            </div>
        ）
    }
}
</スクリプト>