Vant コンポーネント ライブラリを使用してピットを回避する Vue3 の概要

---

序文

この映画の記事では主に、Vue3開発中にライブラリを使用する際のVant UIいくつかの落とし穴について説明します。問題を抱えている小規模パートナーには、その理由をすぐに理解してもらいましょう。自分用の記録も作ってください。

---

1. 問題点

vue3 バージョンでは、特にコンポーネントを使用する場合に vant を使用できません。
具体例: Vue版本3 - Vant版本4
Vant の公式ドキュメントによると、コンポーネントは次のように導入して使用する必要があることがわかります。

import {
    
     Button } from 'vant';

<van-button type="primary">主要按钮</van-button>

しかし、実際には、公式ドキュメントに従って有効にできないことがわかりました:
ソースコード:

<template>
  <van-button @click="testClick" type="primary">主要按钮{
   
   { show }}</van-button>
</template>

<script lang="ts" setup>
	import {
    
     ref } from 'vue'
	import {
    
    
	  Button
	} from 'vant'
	import 'vant/es/button/style';
	const show = ref(false);
	const testClick = () => {
    
    
	  show.value = !show.value
	};
</script>

実際には、すべてのスタイルが有効になっていないことがわかりましたが、クリック イベントは正常にクリックでき、コンソールを開くと、コンポーネントが通常の要素にコンパイルされていないため、有効になっていないことがわかりdivますVant。

糖衣構文がサポートされていない可能性がありますか? その後、別の正式な書き込み方法に変更して、もう一度試してください。

<script lang="ts">
	import {
    
     ref } from 'vue'
	import {
    
    
	  Button
	} from 'vant'
	import 'vant/es/button/style';
	export default {
    
    
	  components: {
    
    
	    [Button.name]: Button,
	  },
	  setup() {
    
    
	    const show = ref<boolean>(false);
	    const testClick =()=> {
    
    
	      show.value = !show.value
	    }
	    return {
    
    
	      show,
	      testClick 
	    }
	  }
	}
</script>

文法糖を削除すればui効果は正常に表示されますが、

なぜこの文法糖に置き換えることができないのかという疑問が生じます。
1. 間違ったバージョンの問題ですか? その後、Vantバージョン 3 にダウングレードして、もう一度試してください。それでも動作しません。ここでは説明しません。時間があれば、試してみてください。
この問題はバージョンの問題ではないため、コンポーネントの使用方法に問題が残ります。

2、解決策

1. 解決策を見つける方法
糖鎖構文の形式では、コンポーネントを導入する方法で、コンポーネントを登録するステップが欠落していることがわかります。これは、糖鎖構文の方法では、コンポーネントを手動で登録せずに自動的に登録するためです。インポートしたものはコンポーネントである
ことがわかりますが、それを使用するときにコンポーネント名が間違って使用されることは問題ですか? コンポーネント名を変更して試してみましょうVantButton<van-button/><Button/>

<template>
  <Button @click="testClick" type="primary">主要按钮{
   
   { show }}</Button>
</template>

コンポーネントは通常どおりコンパイルされます。

案の定、コンポーネントの名前が間違っています、酔っ払っています。では、vant 公式ドキュメントがそのように書かれているのは、独自のコンポーネントを強調するためである可能性があり、接頭辞 <@_@> がその前に追加されています。！！
理由がわかったので、Button同様に使用できるコンポーネントを導入する方法もわかり<van-button/>、コンポーネントのエイリアスを使用できるようになりました。

import {
    
    
  Button as VanButton
} from 'vant'

このように、再度使用しても<van-button/>問題ありません。

3. 問題の原因

1. 一つは、コンポーネント登録の概念が明確でなく、名前が一致しないと誤解していることですが、Vant が提供する公式の機能であり、直接使用できるため、名前を間違っているとは考えていませんでした。
2. Vant ドキュメントに依存しすぎている。もちろんそのままでも使えます

学んだ教訓

基本的な知識ポイントを固めるために、常に vue の公式ドキュメントにアクセスしてください。この問題は回避されます。ドキュメントによっても誤解を招くものがあります。ごみ

記事に問題がある場合は、問題点をご指摘ください。