Vue3知识总结-4

插槽Slots

在某些场景中，可能想要为子组件传递一些模版片段，让子组件在他们的组件中渲染这些片段

<template><SlotsBase><div><h3>插槽标题</h3><p>插槽内容</p></div></SlotsBase>
</template>
<script>
import SlotsBase from "@/components/SlotsBase.vue";
export default {components:{SlotsBase}
}
</script>
<style></style>

渲染作用域

插槽内容可以访问到父组件的数据作用域，因为插槽内容本心是在父组件模版中定义的

默认内容

如果没有传数据，可以有一个默认的值

具名插槽

插槽中的数据传递

需要同时使用父组件和子组件域内的数据。

具名插槽传递数据

<template><SlotsBase><div><h3>插槽标题</h3><p>插槽内容</p></div><template v-slot:header><h3>{123}</h3></template>
<!--    //简写的方式--><template #main><h3>{32131</h3></template><h3>{{message}}</h3><h3>{{currentTest}}</h3>
<!--    传递数据--><SlotsBase v-slot="slotProps"><h3>{{currentTest}}-{{slotProps.msg}}</h3></SlotsBase>
<!--    具名插槽传递数据--><SlotsBase><template #header="slotProps"><h3>{{currentTest}}-{{slotProps.msg}}</h3></template><template #main="slotProps"><h3>{{currentTest}}-{{slotProps.job}}</h3></template></SlotsBase></SlotsBase></template>
<script>
import SlotsBase from "@/components/SlotsBase.vue";
export default {data(){return{message:"插槽续集",currentTest:"测试内容"}},components:{SlotsBase}
}
</script>
<style></style>
<template><h3>base</h3><slot>插槽默认值</slot><hr><slot name="header">插槽默认值</slot><slot name="main">插槽默认值</slot><slot name="header" :msg="childMessage"></slot><slot name="main" :job="jobMsg"></slot>
</template><script>
export default {data(){return{childMessage:"子组件数据",jobMsg:"xiyou "}}
}
</script><style scoped></style>

组件声明周期

创建到销毁的生命周期

声明周期示意图

<template><h3>组件的生命周期</h3><p>{{message}}</p><button @click="updateHandle">更新数据</button>
</template>
<script>
//生命周期函数：
// 创建:beforeCreate created
// 挂载:beforeMount mounted
// 更新:beforeUpdate updated
// 销毁:beforeUnmount unmounted
export default {data(){return{message:"更新之前"}},methods:{updateHandle(){this.message = "更新之后"}},beforeCreate() {console.log("组件创建之前")},created() {console.log("组件创建之后")},beforeMount() {console.log("组件渲染之前")},mounted() {console.log("组件渲染之后")},beforeUpdate() {console.log("组件更新之前")},updated() {console.log("组件更新之后")},beforeUnmount() {console.log("组件销毁之前")},unmounted() {console.log("组件销毁之后")},}
</script>

组件生命周期的应用

1. 通过ref获取元素DOM结构
2. 迷你网络请求渲染数据

<template><h3>组件生命周期函数应用</h3><p ref="name">程序员</p><ul><li v-for="(item,index) of banner" :key="index"><h3>{{item.title}}</h3><p>{{item}}</p></li></ul>
</template><script>
export  default {data(){return{banner: []}},created() {this.banner = [{"title":"123","content":"342"},{"title":"123","content":"342"},{"title":"123","content":"342"},]},beforeMount() {console.log(this.$refs.name)},mounted() {console.log(this.$refs.name)},
}
</script><style scoped></style>

动态组件

<template><component :is="tabComponent"></component><button @click="changeHandler">切换组件</button>
<!--<ComponentA/>-->
<!--<ComponentB/>-->
</template><script>import ComponentA from "@/components/ComponentA.vue"
import ComponentB from "@/components/ComponentB.vue"
export default {data(){return {tabComponent:"ComponentA"}},components:{ComponentA,ComponentB},methods:{changeHandler(){this.tabComponent = this.tabComponent == "ComponentA" ? "ComponentB" : "ComponentA"}}
}
</script>

组件保持存活

当使用在多个组件切换时候，被切换掉的组件会被卸载，可以用过组件强制被切换掉的组件任然保持“存活状态”

组件被卸载

<keep-alive><component :is="tabComponent"></component>
</keep-alive>

异步组件

同步：多个功能，一个一个执行

异步：多个动能，同时运行

依赖注入

Provide 和inject只能由上往下传递

<template>
<h3>Child</h3><p>{{title}}</p><p>{{message}}</p>
</template><script >
export default {inject: ['message'],props:{title:{type:String},}
}</script><style></style>
<template>
<h3>祖宗</h3><Parent title="祖宗的财产"/>
</template>
<script>
import Parent from "@/components/Parent.vue";
export default {data(){return{message:"123"}} ,components:{Parent},// provide:{//   message:"213"// }provide(){return {message: this.message}}
}
</script>