はじめに: Vue 3 では、これはコンポーネント インスタンス内のデータやメソッドにアクセスするために使用されなくなりましたが、新しいメソッドである Comboposition API が採用されました。
コンポジション API は、Vue 3 で新しく導入された API スタイルで、開発者が関連するロジックをまとめて整理し、ロジックをより適切に再利用および結合できるようにします。Comboposition API では、関数を使用してコンポーネントのロジックを定義します。これらの関数は、他のコンポーネントで再利用するために直接エクスポートできます。
ライフサイクルフック関数など、場合によってはこれを使用する必要があることに注意してください。ただし、ほとんどの場合、Composition API を使用してコンポーネントのロジックを定義することをお勧めします。
例：
1. フォーム内で ref="tableComponent" をバインドします。
<el-table ref="tablecomponent" >
</el-table>2. js のインスタンス変数を指定すると、
const tableComponent:any=ref(); //any是Typescript中的特殊类型，用来表示任意类型的值，可不写忽略。特定のバインディング タイプは次の場合もあります。
const tableComponent=ref<InstanceType<typeof Eltable>>()3. オブジェクト メソッドを使用します。
tableComponent.value.cleatSort()。
注: vue3 で定義したバインドされた tableComponent 応答オブジェクト変数をエクスポートする必要があります。！！それ以外の場合、対応する要素のバインドに失敗した場合、通常の操作は実行できず、基本的にエラーが報告されます。
このエラーは通常、Vue 3 で間違ったリアクティブ オブジェクト アクセス メソッドを使用することが原因で発生します。
runtime-core.esm-bundler.js:1108 Uncaught (in Promise) TypeError: null のプロパティを読み取れません (「emitsOptions」を読み取っています)
このエラーが発生した場合は、リアクティブ オブジェクトが正しくバインドされ、使用されているかどうかを再確認してください。
最後に、ref 応答オブジェクトを使用する際の注意点を示します。
① 応答性の高いオブジェクトを作成する: ref 関数を使用して作成された変数は応答性の高いオブジェクトであり、その値の変化を自動的に追跡します。応答性が必要なデータは必ず ref でラップしてください。
②アクセス値：refを使用して作成されたレスポンシブオブジェクト。実際の値は.value属性に格納されます。実際の値にアクセスして変更するには、.value を使用します。
③非同期更新: 非同期操作で応答オブジェクトの値を更新する場合は、インターフェイスが確実に更新されるように Vue.nextTick() を使用するか、this.$nextTick() を待ってください。