【星海出品】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>
//还可以简写为 <template #:header>
//子集加入了一些名字默认值
<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>
组件保持存活
当使用这个方法在多个组件作切换时，被切换掉的组件会被卸载。
被切换掉的组件会被卸载。我们可以通过 <keep-alive> 组件强制被切换掉的组件仍然保持”存活“状态。
不进入卸载期。
<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 #打包发布的一些操作。