切换组件案例
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612175358775-1634433308.png)
v-if显示不同的组件
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612175428618-1618058628.png)
动态组件的实现
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612175448472-1899869618.png)
动态组件的传值
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612175504754-1127760562.png)
认识keep-alive
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612175522150-1017128665.png)
keep-alive属性
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612175550533-449064373.png)
缓存组件的生命周期
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612175735215-512844252.png)
App.vue
<template>
<div>
<button
v-for="item in tabs"
:key="item"
@click="itemClick(item)"
:class="{ active: currentTab === item }"
>
{{ item }}
</button>
<!-- 2.动态组件 -->
<keep-alive include="home,about">
<component
:is="currentTab"
name="coderwhy"
:age="18"
@pageClick="pageClick"
>
</component>
</keep-alive>
<!-- 1.v-if的判断实现 -->
<!-- <template v-if="currentTab === 'home'">
<home></home>
</template>
<template v-else-if="currentTab === 'about'">
<about></about>
</template>
<template v-else>
<category></category>
</template> -->
</div>
</template>
<script>
import Home from "./pages/Home.vue";
import About from "./pages/About.vue";
import Category from "./pages/Category.vue";
export default {
components: {
Home,
About,
Category,
},
data() {
return {
tabs: ["home", "about", "category"],
currentTab: "home",
};
},
methods: {
itemClick(item) {
this.currentTab = item;
},
pageClick() {
console.log("page内部发生了点击");
},
},
};
</script>
<style scoped>
.active {
color: red;
}
</style>
Home.vue
<template>
<div @click="divClick">
Home组件: {{name}} - {{age}}
</div>
</template>
<script>
export default {
name: "home", // home是字符串
props: {
name: {
type: String,
default: ""
},
age: {
type: Number,
default: 0
}
},
emits: ["pageClick"],
methods: {
divClick() {
this.$emit("pageClick");
}
}
}
</script>
<style scoped></style>
About.vue
<template>
<div>
<div>About组件</div>
<button @click="counter++">{{ counter }}</button>
</div>
</template>
<script>
export default {
name: "about",
data() {
return {
counter: 0,
};
},
created() {
console.log("about created");
},
unmounted() {
console.log("about unmounted");
},
activated() {
console.log("about activated");
},
deactivated() {
console.log("about deactivated");
},
};
</script>
<style scoped></style>
Category.vue
<template>
<div>
<div>Category组件</div>
<button @click="counter++">{{ counter }}</button>
</div>
</template>
<script>
export default {
name: "category",
data() {
return {
counter: 0,
};
},
};
</script>
<style scoped></style>
Webpack的代码分包
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612180745111-1066897047.png)
Vue中实现异步组件
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612180801745-48651806.png)
异步组件的写法二
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612180831267-1287614940.png)
异步组件和Suspense
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612180854244-204342918.png)
App.vue
<template>
<div>
App组件
<home></home>
<suspense>
<template #default>
<async-category></async-category>
</template>
<template #fallback>
<loading></loading>
</template>
</suspense>
</div>
</template>
<script>
import { defineAsyncComponent } from "vue";
import Home from "./Home.vue";
import Loading from "./Loading.vue";
// import AsyncCategory from './AsyncCategory.vue';
const AsyncCategory = defineAsyncComponent(() =>
import("./AsyncCategory.vue")
);
const AsyncCategory = defineAsyncComponent({
loader: () => import("./AsyncCategory.vue"),
loadingComponent: Loading,
// errorComponent,
// 在显示loadingComponent组件之前, 等待多长时间
delay: 2000,
/**
* err: 错误信息,
* retry: 函数, 调用retry尝试重新加载
* attempts: 记录尝试的次数
*/
onError: function(err, retry, attempts) {},
});
export default {
components: {
Home,
AsyncCategory,
Loading,
},
};
</script>
<style scoped></style>
Home.vue
<template>
<div>
Home组件
</div>
</template>
<script>
export default {};
</script>
<style scoped></style>
Loading.vue
<template>
<div>
Loading
</div>
</template>
<script>
export default {};
</script>
<style scoped></style>
AsyncCategory.vue
<template>
<div>
<h2>{{ message }}</h2>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Category",
};
},
};
</script>
<style scoped></style>
$refs的使用
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612181821243-1395741955.png)
$parent和$root
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612181923476-1561579150.png)
App.vue
<template>
<div>
<!-- 绑定到一个元素上 -->
<h2 ref="title">哈哈哈</h2>
<!-- 绑定到一个组件实例上 -->
<nav-bar ref="navBar"></nav-bar>
<button @click="btnClick">获取元素</button>
</div>
</template>
<script>
import NavBar from "./NavBar.vue";
export default {
components: {
NavBar,
},
data() {
return {
names: ["abc", "cba"],
};
},
methods: {
btnClick() {
console.log(this.$refs.title);
console.log(this.$refs.navBar.message);
this.$refs.navBar.sayHello();
// $el
console.log(this.$refs.navBar.$el);
},
},
};
</script>
<style scoped></style>
NavBar.vue
<template>
<div>
<h2>NavBar</h2>
<button @click="getParentAndRoot">获取父组件和根组件</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "我是NavBar中的message",
};
},
methods: {
sayHello() {
console.log("Hello NavBar");
},
getParentAndRoot() {
console.log(this.$parent);
console.log(this.$root);
},
},
};
</script>
<style scoped></style>
认识生命周期
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612183915184-770254033.png)
生命周期的流程
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612183844287-285647037.png)
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612183857002-988604930.png)
App.vue
<template>
<div>
<button @click="isShow = !isShow">切换</button>
<template v-if="isShow">
<home></home>
</template>
</div>
</template>
<script>
import Home from "./Home.vue";
export default {
components: {
Home,
},
data() {
return {
isShow: true,
};
},
};
</script>
<style scoped></style>
Home.vue
<template>
<div>
<h2 ref="title">{{ message }}</h2>
<button @click="changeMessage">修改message</button>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Home",
};
},
methods: {
changeMessage() {
this.message = "你好啊, 哈哈";
},
},
beforeCreate() {
console.log("home beforeCreate");
},
created() {
console.log("home created");
},
beforeMount() {
console.log("home beforeMount");
},
mounted() {
console.log("home mounted");
},
beforeUnmount() {
console.log("home beforeUnmount");
},
unmounted() {
console.log("home unmounted");
},
beforeUpdate() {
console.log(this.$refs.title.innerHTML);
console.log("home beforeUpdate");
},
updated() {
console.log(this.$refs.title.innerHTML);
console.log("home updated");
},
};
</script>
<style scoped></style>
组件的v-model 【组件的双向绑定】
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612205818024-1154006559.png)
组件v-model的实现
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612205842113-1509727072.png)
computed实现
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612205910764-1186494523.png)
绑定多个属性
![](https://img2020.cnblogs.com/blog/1877004/202106/1877004-20210612205941128-382865345.png)
App.vue
<template>
<div>
<!-- 元素上使用v-model -->
<!-- <input v-model="message">
<input :value="message" @input="message = $event.target.value"> -->
<!-- 组件上使用v-model 【封装高阶的表单组件的时候使用。】 -->
<!-- <hy-input v-model="message"></hy-input> -->
<!-- (1)上面这行代码相当于做了2件事:绑定属性modelValue,绑定事件@update:model-value,通过这个事件实现双向绑定,给message赋值。(2)既然这里绑定了属性modelValue、事件update:model-value,那么子组件中就要绑定modelValue,并触发这个事件。(3)这是组件,不是原生的html元素,所以不用$event.target.value,用event,即组件HyInput传过来的是什么值就是什么值。(4):modelValue也可以写成:model-value,建议使用:model-value。 -->
<!-- <hy-input :modelValue="message" @update:model-value="message = $event"></hy-input> -->
<!-- 绑定两个v-model -->
<!-- 【v-model:参数:v-model可以传参】 -->
<hy-input v-model="message" v-model:title="title"></hy-input>
<h2>{{ message }}</h2>
<h2>{{ title }}</h2>
</div>
</template>
<script>
import HyInput from './HyInput.vue'
export default {
components: {
HyInput,
},
data() {
return {
message: 'Hello World',
title: '哈哈哈',
}
},
}
</script>
<style scoped></style>
<template>
<div>
<h3>我是HyInput2组件</h3>
<!-- 1.默认绑定和事件处理 【非input元素。】 -->
<!-- <button @click="btnClick">hyinput按钮</button>
<div>HyInput的message: {{modelValue}}</div> -->
<!-- 2.通过input 【不使用input的v-model,而是直接使用:value、 @input】 -->
<!-- <input :value="modelValue" @input="btnClick"> -->
<!-- 3.绑定到props中是不对的。开发中,不要随便更改props的值。这里改变props的值,跟外界木有关系。 -->
<!-- <input v-model="modelValue"> -->
<!-- 4. 【(1)更好的封装方式:既然是input,直接使用input的v-model,而不是:value、 @input。(2)使用computed,value是自定义的computed。(3)如果是input元素,直接使用computed。】-->
<input v-model="value" />
</div>
</template>
<script>
export default {
emits: ['update:modelValue'], // 这里写成小驼峰,使用的时候,用横线
// 开发中,不要随便更改props的值
props: {
modelValue: String, // 【在这里定义modelValue】
},
computed: {
value: {
set(value) {
this.$emit('update:modelValue', value)
// this.modelValue = value // 这样写报错
},
get() {
return this.modelValue
},
},
},
methods: {
btnClick(event) {
this.$emit('update:modelValue', event.target.value)
},
},
}
</script>
<style scoped></style>
<template>
<div>
<input v-model="value" />
<input v-model="why" />
</div>
</template>
<script>
export default {
props: {
modelValue: String, // 【在这里定义modelValue】
title: String,
},
// 【应该少定义了2个触发'update:modelValue'、'update:title'的函数,或者在生命周期中触发。】
emits: ['update:modelValue', 'update:title'],
computed: {
value: {
set(value) {
this.$emit('update:modelValue', value)
},
get() {
return this.modelValue
},
},
why: {
set(why) {
this.$emit('update:title', why)
},
get() {
return this.title
},
},
},
}
</script>
<style scoped></style>