【星海出品】VUE（六）
插槽Slots
传递属性 attribute
App,vue
<script>
import SlotsBase from "./components/SlotsBase.vue"
import SlotsTow from "./components/SlotsTow.vue"
export default {
components:{
SlotsBase,
SlotsTow
},
data(){
return{
message: "父集 message"
}
}
}
</script>
<template>
<p>父级插槽基础知识</p>
<slots-base />
<SlotsTow>
<h3>{{message}}</h3>
</SlotsTow>
</template>
<style>
</style>
SlotsBase.vue
<script>
</script>
<template>
<h3> title </h3>
<slot></slot>
</template>
<style>
</style>
SlotTow.vue
<template>
<h3>子集slots插槽续集</h3>
<!-- slot的方式进行显示 -->
<slot></slot>
</template>
<script >
export default {
data(){
return {
}
}
}
</script>
具名插槽，可以多个处理
利用name的形式进行匹配规则
//父级加入v-slot
<SlotsTow>
<template v-slot:header>
<h3> {{message}} </h3>
</template>
<template #:XXX>
<...>
<...>
</SlotsTow>
//还可以简写为
//子集加入了一些名字默认值
<slot name="header"> 插槽默认值 </slot>
<slot name="xxx"> 其他插槽 </slot>
父子元素同时出现在插槽
多插槽
子元素的元素需要先传给父元素，然后父元素在放到插槽里，实现父元素和子元素的元素一起出现在一个插槽里
slotProps 获取子级中的数据
App.vue
<script>
import SlotsBase from "./components/SlotsBase.vue"
import SlotsTow from "./components/SlotsTow.vue"
export default {
components:{
SlotsBase,
SlotsTow
},
data(){
return{
message: "父集 message"
}
}
}
script>
<template>
<p>父级插槽基础知识p>
<SlotsBase>
<template #header="slotProps">
<h3> {{ message }} - {{ slotProps.msg }} h3>
template>
SlotsBase>
<SlotsTow>
<h3>{{message}}h3>
SlotsTow>
<slot :msg="childMessage">slot>
template>
<style>
style>
SlotsBase.vue
<script>
export default {
data(){
return{
childMessage: "子组件数据",
msg:"子组件msg"
}
}
}
</script>
<template>
<h3> 子组件续集 </h3>
<slot name="header" :msg="childMessage"></slot>
</template>
<style>
</style>
组件的生命周期
运行时被称为生命周期钩子函数
创建期: beforeCreate created
组件创建之前
组件创建之后
挂载期: beforeMounte mounted
#准备渲染，把已经创建好的组件显示在页面上
渲染之前是触发一个生命周期函数。insert DOM nodes
更新期: beforeUpdate updated
组件更新之前
组件更新之后
销毁期: beforeUnmount unmounted
组件销毁之前
组件销毁之后
生命周期的应用
通过 ref 获取元素 DOM 结构
<template>
<h3>组件生命周期函数应用</h3>
<p ref="name"> test </p>
</template>
<script>
export default {
data(){
return{
banner: []
}
},
created(){ //要在创建之后，才能去获取数据，创建之前就不会有data这样的初始化数据。
this.banner = [
{
"title": "CN",
"content": "in Aisa east"
},
{
"title": "India",
"content": "in Aisa north"
}
]
},
beforeMount(){ //渲染之前
console.log(this.$refs.name); //undefined
},
mounted(){ //渲染之后 ,拿到数据是渲染之后的例子，比如刚打开京东，没有数据，但是格子已经出来了。
console.log(this.$refs.name);
}
}
</script>
界面切换组件的数据
动态组件
App.vue
<template>
<component :is="tabComponent"></component>
<button @click="changeHandle"> 切换 </button>
</template>
<script>
import ComponentA from "./components/ComponentA.vue"
import ComponentB from "./components/ComponentB.vue"
export default {
data(){
return{
tabComponent:ComponentA
}
},
components:{
ComponentA,
ComponentB
},
methods:{
changeHandle(){
this.tabComponent = this.tabComponent == "ComponentA" ? "ComponentB" : "ComponentA"
}
}
}
</script>
组件保持存活
当使用这个方法在多个组件作切换时，被切换掉的组件会被卸载。
被切换掉的组件会被卸载。我们可以通过
不进入卸载期。
<component :is>
可以使用以下方式
<keep-alive>
<component :is="tabComponent"></component>
</keep-alive>
异步组件
defineAsyncComponent
import { defineAsyncComponent } from 'vue'
//异步加载
const AsyncComponentB = defineAsyncComponent(() =>
import('./components/ComponentB.vue')
)
export default {
components: {
AsyncComponentB
}
}
逐级透传，依赖注入
只要确定是他的子级，不管多少级，都可以通过以下方法进行数据共享。
子级可以先访问data然后再上传。
Provide //提供
Inject //接收
export default {
provide:{
message: "爷爷的财产"
}
}
<template>
<h3> Child </h3>
<p> {{message}} </p>
</template>
<script>
export default {
inject["message"]
}
</script>
另一种方法，来源于data，动态可变的
data(){
return {
message: "爷爷的财产!!!"
}
},
provide(){
return {
message: this.message
}
}
全局数据是根级，下面也可以接收到
main.js
app.provide("golabData","我是全局数据")
VUE应用
从main.js中开始的。
首先创建实例对象
import { createApp } from 'vue'
在一个VUE的项目中，有且仅有一个实例对象。
每一个应用都需要一个根组件
挂在一个根组件
const app = createApp(App)
APP：根组件
应用实例只有在.mount()方法后才会渲染出来。挂载一个 #app 的容器 ，这个#app 对应的是index.html。
意味着之后的所有内容都会放在index.html的id="app"的里面去呈现。
app.mount('#app')
语法糖
createApp(App).mount('#app')
#所以App.vue是代码的入口。
构建工具
Webpack #打包发布的一些操作。
vite #打包发布的一些操作。