Vue Js で再利用可能なコンポーネントの変更可能なテキストを作成する方法がわかりません

Question

<p>チュートリアルを見ながら、再利用可能なタブコンポーネントを作成しています。それを見た後、私はそれがどのように機能するかを理解しました。ただし、私のプロジェクトでは、これは再利用可能なコンポーネントであるため、変更可能なタイトルを持つタブを作成する必要があるため、新しいタブごとにタイトルを変更する必要がありますが、まだそれがわかりません。方法を調べてください。ページに追加した TabsWrapper コンポーネントから何らかの方法でタイトルを取得する必要があります</p> <pre class="brush:php;toolbar:false;"><div class="tab_header">{{title}}</div></pre> <p>次に、このヘッダーによって、TabsWrapper コンポーネントのメインヘッダーであるこの div 内のテキストを変更します。 </p> <pre class="brush:php;toolbar:false;"><div class="tab_header">{{title}}</div></pre> <p>私のコード: 1 つ目は、Web サイトのトップページに追加したコンポーネント外のコードです。 </p> <pre class="brush:php;toolbar:false;"><TabsWrapper> <Tab title="タブ 1">こんにちは 1</Tab> <Tab title="タブ 2">こんにちは 2 </Tab> <Tab title="タブ 3">Hello 3</Tab> <Tab title="タブ 4">Hello 4</Tab> </TabsWrapper></pre> <p>2 つ目は、TabsWrapper</p> を担当するコンポーネント内のコードです。 <pre class="brush:php;toolbar:false;"><テンプレート> <div class="タブ"> <div class="tab_header"></div> <ul class="tabs_header">

{{ タイトル }} </li> </ul> <スロット/> </div> </テンプレート> <スクリプト> 'vue' から { ref} をインポートします。 import { 提供 } から 'vue'; デフォルトをエクスポート{ setup(props,{スロット}){ const tabTitles=ref(slots.default().map((tab)=> tab.props.title)) const selectedTitle=ref(tabTitles.value[0]) Provide("selectedTitle", selectedTitle) 戻る{ 選択されたタイトル、 タブタイトル、 } } } </script></pre> <p>このコードはタブから各タイトルを取得します</p> <pre class="brush:php;toolbar:false;"><Tab title="タブ 1">こんにちは 1</Tab></pre> <p>このコードはそれをレンダリングします</p> <pre class="brush:php;toolbar:false;"><li v-for="tabTitles のタイトル" :key="タイトル" @click="selectedTitle = タイトル" :class=" {選択: タイトル ==selectedTitle}" > {{ タイトル }} </li></pre> <p>同じテクニックを繰り返してみましたが、うまくいきましたが、もっと良い方法があると思います</p> <p> <pre class="snippet-code-html lang-html prettyprint-override"><code> <div class="tabs"> <div class="tab_header" v-for="headTitles の headtitle" :key="headtitle">{{headtitle}}</div> <ul class="tabs_header">

{{ タイトル }} </li> </ul> <スロット/> </div> </テンプレート> <スクリプト> 'vue' から { ref} をインポートします。 import { 提供 } から 'vue'; デフォルトをエクスポート{ setup(props,{スロット}){ const tabTitles=ref(slots.default().map((tab)=> tab.props.title)) const headTitles=ref(slots.default().map((tab)=>tab.props.headtitle)) const selectedTitle=ref(tabTitles.value[0]) Provide("selectedTitle", selectedTitle) 戻る{ 選択されたタイトル、 タブタイトル、 頭のタイトル、 } } } </script></code></pre> </p>

Answer 1

script タグでプロップを渡すだけで、このキーワードとプロップ名を使用して直接アクセスできます。

リーリー

次のようなテンプレートタグ内で

リーリー

ref を使用する必要はありません。v-for を直接使用して、配列要素をループするだけです。

リーリー