vue - 動態組件/內置組件

Vue.js

本章內容：

• 動態組件/內置組件
  • component
  • slot
    • 匿名插槽
    • 匿名插槽注意事項
    • 具名插槽
    • 具名插槽注意事項
  • transition
  • transition-group
  • keep-alive
    

動態組件/內置組件

component

​ component是Vue內置的一個組件，標籤屬性是is，作用是可以自由切換以註冊過的全局組件，或這是Vue實例中註冊過的局部組件，不支持全局和局部組件內的子組件。

<div id="app">
    <!-- 第一種方式，直接傳入組件名，必須是字符串的形式。 -->
    <component :is=" 'part' "></component>
    <!-- 第二種方式，在data中定義屬性，通過屬性來控制某模板的切換顯示。 -->
    <component :is=" swiper "></component>
</div>

// 聲明全局組件
Vue.component("overall",{
    template: `
        <div>
            <h2>component可以切換全局組件</h2>
        </div>
	`
})
new Vue({
    el: "#app",
    data: {
        swiper: "overall"
    },
    components: {
        part: {
            template: `
                <div>
                	<h2>component可以切換局部組件</h2>
                </div>
			`
        }
    }
})

slot

​ <slot> 元素作爲承載分發內容的出口。

匿名插槽

<div id="app">
    <aaa>
         <!-- 如果不使用<slot/>元素作爲分發內容的出口，則<bbb/>組件會被屏蔽掉，不會在頁面中展示。 -->
        <bbb></bbb>
    </aaa>
</div>

let Aaa = {
    template: `
        <div>
            <h3>我是Aaa組件</h3>
            <slot></slot>
        </div>
	`
}
let Bbb = {
    template: `<h3>我是Bbb組件</h3>`
}
new Vue({
    el: "#app",
    components: {
        Aaa,
        Bbb
    }
})

匿名插槽注意事項

1. 不定義name 和slot，直接派發內容，叫做匿名插槽。
2. 匿名插槽派發內容時，需要注意佔位，當前插入的內容要和<slot/>標籤的位置相等。
3. 使用匿名插槽時，派發的內容只有一個，<slot/>有多個則會自動克隆多份。
   
   

具名插槽

<div id="app">
    <Aaa>
        <ccc slot="Ccc"></ccc> <!-- 派發內容，slot指明分發到那個<slot/>插槽中。 -->
        <bbb slot="Bbb"></bbb>			
    </Aaa>
</div>

let Aaa = {
    template: `
        <div>
            <h3>Aaa組件</h3>
            <slot name="Ccc"></slot> <!-- 通過name指明只接受slot爲Ccc的內容。 -->
            <slot name="Bbb"></slot>
        </div>
    `
}
let Bbb = {
    template: `<h3>Bbb組件</h3>`
}
let Ccc = {
    template: `<h3>Ccc組件</h3>`
}
new Vue({
    el: "#app",
    components: {
        Aaa,
        Bbb,
        Ccc
    }
})

具名插槽注意事項

1. 定義name和slot屬性的，叫做具名插槽。
2. <slot/>定義name屬性，表示只接受slot屬性值爲name值的。
   
   

transition

​ 作用於單一元素進行過渡效果。

<style>
    /* 進入前/離開後*/
    .fadeToggle-enter,.fadeToggle-leave-to { 
        opacity: 0;
    }
    /* 進入中/離開中*/
    .fadeToggle-enter-active,.fadeToggle-leave-active {
        transition: opacity 1s;
    }
    /* 進入後/離開前*/
    .fadeToggle-enter-to,.fadeToggle-leave {
        opacity: 1;
    }
</style>

<div id="app">
    <button @click="fadeToggle = !fadeToggle">{{fadeToggle}}</button>
    <transition name="fadeToggle">
        <h3 v-show="fadeToggle">Hello Vuejs</h3>
    </transition>
</div>

new Vue({
    el: "#app",
    data: {
        fadeToggle: true
    }
})

transition-group

​ 適用於多個元素添加動畫

<style>
    li{
        width:200px;
        margin:10px 0;
        background:#f60;
    }
    .fadeIn-enter-active {
        animation: fadeIn 2s;
    }
    @keyframes fadeIn {
        from{
            opacity: 0;
            transform: translateX(100%);
        }
        to{
            opacity: 1;
            transform: translateX(0);
        }
    }
</style>

<div id="app">
    <button @click="add()">add</button>
    <transition-group name="fadeIn" tag="ul">
        <li v-for="item,index in elArr" :key="index">{{item}}</li>
    </transition-group>
</div>

let nameArr = ["酷酷", "醜醜", "帥帥", "威威"];
new Vue({
    el: "#app",
    data:{
        elArr: ["鬼鬼", "小小", "美美", "臭臭"]
    },
    methods:{
        add() {
            this.elArr.push(nameArr[Math.floor(Math.random() * nameArr.length)]);
        }
    }
})

keep-alive

​ 主要用於保留組件狀態或避免重新渲染， 當組件在 <keep-alive/> 內被切換，它的 activated 和 deactivated 這兩個生命週期鉤子函數將會被對應執行。

<div id="app">
    <button @click="toggle()">create|destroy</button>
    <keep-alive>
        <keep-alive-test v-if="isExist"/>
    </keep-alive>
</div>

const KeepAliveTest = {
    // keep-alive 組件激活時調用。
    activated() { 
        console.log("激活")
    },
    // keep-alive 組件停用時調用。
    deactivated() { 
        console.log("停用")
    },
    template: "<div>我是KeepAliveTest組件</div>"
};
new Vue({
    el:"#app",
    data: {
        isExist: true
    },
    components: {
        KeepAliveTest
    },
    methods: {
        toggle() {
            this.isExist = !this.isExist
        }
    }
});

---