test

test

Transcript

2. 動的コンポーネント タブ付き画面のように、コンポーネントを動的に変更できる場面をよく見ると思います。 A C B componentA A C B componentC これは<component>要素とis属性でバインドします。 is属性は全ての属性が DOMの属性としてバインドされます。
3. Preview <script> Vue.component('my-textarea', { template: '<textarea></textarea>' }) Vue.component('my-text', { template: '<input>' }) new Vue({ el: '#app', data: function() { return { tab: 'my-textarea' } } }) </script> JS <div id="app"> <div> <button @click="tab='my-text'">text</button> <button @click="tab='my-textarea'">textarea</button> </div> <component :is ="tab"></component> </div> HTML Preview | textarea text textarea text | 動的コンポーネント is属性を使ってコンポーネントの切り替えをしましょう。 textとtextareaをそれぞれクリックすると、動的に切り替わります。 <component v-bind:is ="コンポーネント名 "></component>
4. <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> <div> <button @click="tab='my-text'">text</button> <button @click="tab='my-textarea'">textarea</button> </div> <!-- 以下にis属性を記述してください --> <component :is="tab"></component> </div> <script> Vue.component('my-textarea', { template: '<textarea></textarea>' }) Vue.component('my-text', { template: '<input>' }) new Vue({ el: '#app', data: function() { return { tab: 'my-textarea' } } }) </script>
6. v-bind:is + keep-alive v-bind:isを使用すればコンポーネントを動的に切り替えることができました。 しかし、記入途中でコンポーネントを切り替えてしまうと記述内容が消えてしまいます。 Preview Preview | textarea text textarea text Hello Wor| Preview textarea text | 文字を入力 コンポーネントを切り替え 入力内容が消えてしまう 入力内容が消えてしまうと不便なこともあると思います。 この問題ではコンポーネントを切り替えても内容が消えない方法を学習しましょう！
7. Preview <script> Vue.component('my-textarea', { template: '<textarea></textarea>' }) Vue.component('my-text', { template: '<input>' }) new Vue({ el: '#app', data: function() { return { tab: 'my-textarea' } } }) </script> JS <div id="app"> <div> <button @click="tab='my-text'">text</button> <button @click="tab='my-textarea'">textarea</button> </div> <keep-alive> <component :is="tab"></component> <keep-alive> </div> HTML Preview | textarea text textarea text Hello Wor| 前問の<component>タグにkeep-aliveで囲むことでコンポーネントの状態を維持できます。 <keep-alive> 　<component v-bind:is ="コンポーネント名 "></component> </keep-alive> v-bind:is + keep-alive Preview textarea text Hello Wor| 文字を入力 コンポーネント 切り替え 内容が保持 されている
8. <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> <div> <button @click="tab='my-text'">text</button> <button @click="tab='my-textarea'">textarea</button> </div> <!-- 以下にコードを記述してください --> <keep-alive> <component :is="tab"></component> </keep-alive> </div> <script> Vue.component('my-textarea', { template: '<textarea></textarea>' }) Vue.component('my-text', { template: '<input>' }) new Vue({ el: '#app', data: function() { return { tab: 'my-textarea' } } }) </script>
9. 修正前スライド
10. v-bind:is v-bind:is を用いることで、コンポーネントの切り替えができる。 ex. 2つのコンポーネントの切り替え Vue.component('my-textarea', { template: '<textarea></textarea>' }) Vue.component('my-text', { template: '<input>' }) new Vue({ el: '#app', data: function() { return { tab: 'my-textarea' } } }) 登録 <p> <button @click="tab='my-text'">text</button> 　<button @click="tab='my-textarea'">textarea</button> </p> <component :is="tab"></component> 登録 clickにより、my-textとmy-textareaが切り替わる
11. v-bind:is + keep-alive v-bind:is を用いることで、コンポーネントの切り替えができる。 更に、keep-alive で囲むことにより、コンポーネントの状態を保持できる。 Ex. keep-alive` で囲みつつ、 text と textarea をボタンクリックにより切り替える -> ボタンによる切り替えを行なっても入力内容が保持される // keep-alive あり <keep-alive> <component :is="tab"></component> </keep-alive> // keep-alive なし <component :is="tab"></component> 切り替え 切り替え 内容が消える 切り替え 切り替え 内容が保持