Vue js でボタンのネストを回避する方法

Question

スロットのあるコンポーネントとして、複数回使用したいボタンがあります

リーリー

しかし、これを使用したいときは、スロット ボタンで @click="method" を使用できなかったので、ネストされたボタンを使用しました (スロット ボタンと、@click=" を使用するためだけに別のボタンがありました)方法"）： ＃＃＃ リーリー

これは機能しますが、無効な HTML です。どうすれば解決できますか?

Answer 1

Vue3 SFC プレイグラウンド

v-bind="$attrs" を使用して、ボタン コンポーネントのプロパティをテンプレート内の <button> にバインドし、For default 属性を無効にする必要があります。継承の場合は、inheritAttrs:false を使用します。

また、ここでは名前付きスロットを使用する必要はありません。デフォルトのものを使用してください:

リーリー

親コンポーネント:

リーリー