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
        }
    }
});

---