当前位置：首页 > news >正文

Vue - 动态组件异步组件

news 来源：原创 2024/5/6 19:16:49

动态组件

<div id="app">
    <components :is="com[2]"></components>
    <components :is="com[1]"></components>
    <components :is="com[0]"></components>
</ul>
</div>
<script>
var comA = {
    template: '<p>永远相信美好的事情即将发生</p>'
}
var comB = {
    template: '<p>javascript学个简单的精通</p>'
}
var comC = {
    template: '<p>学个php都没时间 妈的</p>'
}
new Vue({
    el: '#app',
    components: {
        comA,
        comB,
        comC
    },
    data: {
        com: ['com-a', 'com-b', 'com-c']
    }
})
</script>

动态组件 keep-alive

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。
重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

<style>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}
.tab-button:hover {
  background: #e0e0e0;
}
.tab-button.active {
  background: #e0e0e0;
}
.tab {
  border: 1px solid #ccc;
  padding: 10px;
}
.posts-tab {
  display: flex;
}
.posts-sidebar {
  max-width: 40vw;
  margin: 0;
  padding: 0 10px 0 0;
  list-style-type: none;
  border-right: 1px solid #ccc;
}
.posts-sidebar li {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  cursor: pointer;
}
.posts-sidebar li:hover {
  background: #eee;
}
.posts-sidebar li.selected {
  background: lightblue;
}
.selected-post-container {
  padding-left: 10px;
}
.selected-post > :first-child {
  margin-top: 0;
  padding-top: 0;
}
</style>
<div id="app">
    <button 
        v-for="tab in tabs"
        v-bind:key="tab"
        v-bind:class="['tab-button', {active: currentTab === tab}]"
        v-on:click="currentTab = tab"
    >{{tab}}</button>
    <keep-alive>
        <components
            v-bind:is="currentTabComponent"
            class="tab"
        ></components>
    </keep-alive>
</div>
<script>
var Posts = {
    data: function(){
        return{
            posts: [
                { 
                    id: 1, 
                    title: 'Cat Ipsum',
                    content: '<p>抽时间学PHP啊啊啊啊</p>'
                },
                { 
                    id: 2, 
                    title: 'Hipster Ipsum',
                    content: '<p>javascript 简单的精通</p>'
                },
                { 
                    id: 3, 
                    title: 'Cupcake Ipsum',
                    content: '<p>时间啊 我的朋友 让我们好好相处 珍惜时光 好不好</p>'
                }
            ],
            selectedPost: true
        }
    },
    template: `
        <div class="posts-tab">
            <ul class="posts-sidebar">
                <li 
                    v-for="post in posts"
                    v-bind:class="{selected: post === selectedPost}"
                    @click="selectedPost = post"
                >{{post.title}}</li>
            </ul>
            <div class="selected-post-container">
                <div v-if="selectedPost">
                    <h3>{{selectedPost.title}}</h3>
                    <div v-html="selectedPost.content"></div>
                </div>
                <strong v-else>
                    Click on a blog title to the left to view it.
                </strong>
            </div>
        </div>
    `
}
var Archive = {
    template: '<p>javascript学个简单的精通</p>'
}
new Vue({
    el: '#app',
    components: {
        Posts,
        Archive
    },
    data: {
        tabs: ['Posts', 'Archive'],
        // 默认是显示第一个组件
        currentTab: 'Posts'
    },
    computed: {
        currentTabComponent: function(){
            // 转换为小写
            return this.currentTab.toLowerCase()
        }
    }
})
</script>