【星海出品】VUE（六）

星海出品】VUE（六）"/>

【星海出品】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 #打包发布的一些操作。