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

前端基础之《Vue（8）—内置组件》

news 来源：原创 2025/4/24 8:18:46

一、Vue2.0中的内置组件

1、<slot>
插槽

2、<keep-alive>
动态组件

被keep-alive所包裹的组件：
（1）不会被销毁。
（2）还会多两个生命周期钩子：activated()、deactivated()。
（3）mounted()只执行一次，activated()、deactivated()可以执行多次。

keep-alive的属性：
include：包含在include里面的组件不会死。
exclude：包含在exclude里面的组件会死，其他都不死。

3、<component>
它的is属性，is等于谁就显示谁。
有种v-if的感觉，根据指定条件渲染目标组件，它的is属性等于哪个组件，就显示哪个组件。
它经常配合<keep-alive>一起使用。

4、<transition>

5、<transition-group>

二、keep-alive组件例子

<html>
<head><title>动态组件</title><style>.tabbar {height: 60px;line-height: 60px;display: flex;position: fixed;bottom: 0;left: 0;right: 0;}.tabbar>span {flex: 1;border: 1px solid #ccc;text-align: center;cursor: pointer;}.tabbar>span.on {color: red;}</style>
</head>
<body><div id="app"><!-- <home-1></home-1><friend-1></friend-1><user-1></user-1> --><!-- 组件不死 --><keep-alive><component :is="page"></component></keep-alive><tabbar-1 v-model="page"></tabbar-1></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const Home = {template:`<div><h1>首页</h1><input type="text" v-model="a" /></div>`,data() {return {a: 1}},mounted() {console.log('---首页挂载完成')},activated() {console.log('---首页激活')},deactivated() {console.log('---首页休眠')}}const Friend = {template:`<div><h1>好友</h1><input type="text" v-model="b" /></div>`,data() {return {b: 1}}}const User = {template:`<div><h1>个人中心</h1><input type="text" v-model="c" /></div>`,data() {return {c: 1}}}Vue.component('tabbar-1', {template: `<div class='tabbar'><span v-for='item in list' v-text='item.label' @click='$emit("input",item.tab)' :class='{on:item.tab===value}'></span></div>`,props: {value: {type: String, default:''}},data() {return {list: [{id:1, tab:'home-1', label:'首页'},{id:2, tab:'friend-1', label:'好友'},{id:3, tab:'user-1', label:'个人中心'}]}}})const app = new Vue({components: {'home-1': Home,'friend-1': Friend,'user-1': User},data() {return {page: 'home-1'}}})app.$mount('#app')</script></body>
</html>