この記事では主に vue 動的コンポーネント コンポーネントを紹介します. Vue には組み込みの <component> が用意されています. これは特に動的コンポーネントのレンダリングを実現するために使用されます. このタグはプレースホルダーに相当します. 指定するには is 属性を使用する必要があります.バインドされたコンポーネント. 詳細を知りたい場合は、次の記事の特定のコンテンツを参照してください。
- 成分
動的コンポーネント レンダリングの実装方法
Vue は組み込みの<component>を提供します。これは動的コンポーネントのレンダリングを実現するために特別に使用されます。
このタグはプレースホルダーと同等です。バインドされたコンポーネントを指定するには is 属性を使用する必要があります
<button @click="comName = 'Left'">展示Left</button>
<button @click="comName = 'Right'">展示Right</button>
<div class="box">
<!-- 渲染Left组件和Right组件 -->
<!-- component组件是Vue内置的 -->
<!-- is表示要渲染的组件的名字 -->
<component :is="comName"></component>
</div>
<script>
import Left from '@/compeonents/Left.vue'
import Right from '@/components/Right.vue'
export default {
components: {
Left,
Right
},
data() {
return {
//comName 表示要展示的组件的名字
comName: Left,
}
}
}
</script>
- 生き続ける
- 既存の問題
Leftコンポーネントにボタンを 1 つ追加する機能を実装する場合は、操作を 1 つ追加してからコンポーネントを切り替え、元に戻します。
以下は左のプラスワン関数です
<div class="left-container">
<h3>Left 组件 ---- {
{ count }}</h3>
<button @click="count += 1">+1</button>
</div>
<script>
export default {
data(){
return {
count: 0
}
}
}
</script>操作、操作を 1 つ追加した後、正しいコンポーネントに切り替えてから元に戻し、コンポーネント内のデータが書き換えられて初期化されていることを確認します。
Vueのライフサイクルを使用してLeftコンポーネントを表示する
以下は、左に追加されたライフサイクル機能です
export default {
created() {
console.log('Left 组件被创建了！')
}，
destoryed(){
console.log('Left 组件被销毁了~')
}
}
既存の問題:コンポーネントの切り替え中にコンポーネントが破棄されて作成されるため、同じコンポーネントに切り替えるたびに取得されるコンポーネント オブジェクトが異なり、初期化データが書き換えられます。
- キープアライブを使用して解決する
キープアライブコンポーネントもVueの組み込みコンポーネントであり、直接使用できます。
アプリ ルート コンポーネントで、次のように変更します。
<keep-alive>
<!-- keep-alive 可以把内部的组件进行缓存，而不是销毁组件 -->
<component :is="comName"></component>
</keep-alive>
- キープアライブのライフサイクル
该生命周期，只有在组件使用了keep-alive时才能使用
deactivated当组件被缓存时，自动触发
actived当组件被激活时，自动触发
在Left组件中添加如下修改
//当组件第一次被创建时，会先触发created,后触发activated
//当组件被激活时，只会触发activated，不触发created
activated() {
console.log('组件被激活了，activated')
},
deactivated(){
console.log('组件被缓存了，deactivated')
}
- keep-alive 的 include, exclude属性
keep-alive默认会缓存所有被keep-alive包裹的component里的组件
如何指定需要缓存的组件呢：
使用include / exclude 属性,不能同时使用
<keep-alive include="Left,MyRight">
<component :is="comName"></component>
</keep-alive>以上指定了需要缓存的组件名称： 注意这里的组件的名称
Left组件中：
export default{}Right组件中：
export default{
//当提供了name属性后，组件的名称就是name属性的值
name: 'MyRight'
}区分： 组件内name属性，和组件外注册名 的关系
组件外：
import Left '@/components/Left.vue'
components: {
Left,
}这里的注册名只用于组件的引用，如果组件内没有name属性那么name默认就是注册名
export default{
//当提供了name属性后，组件的名称就是name属性的值
name: 'MyRight'
}