vue.js基础组件4--下
1.动态组件
1.定义动态组件
利用动态组件可以动态切换页面中显示的组件。使用<component>标签可以定义动态组件，语法格式如下。
<component is="要渲染的组件"></component>
上述语法格式中，<component>标签必须配合is属性一起使用，is属性的属性值表示要渲染的组件，当该属性值发生变化时，页面中渲染的组件也会发生变化。
is属性的属性值可以是字符串或组件，当属性值为组件时，如果要实现组件的切换，需要调用shallowRef()函数定义响应式数据，将组件保存为响应式数据。shallowRef()函数只处理对象最外层属性的响应，它比ref()函数更适合于将组件保存为响应式数据。
演示动态组件的使用方法：
打开命令提示符，切换到D:\vue\chapter04目录，在该目录下执行如下命令，创建项目。
步骤一：
步骤二：项目创建完成后，执行如下命令进入项目目录，启动项目。
步骤三：
步骤四：
步骤五：
步骤六：
步骤七：
<template><button @click="showComponent = MyLeft">展示MyLeft组件</button><button @click="showComponent = MyRight">展示MyRight组件</button><div><component :is="showComponent"></component></div>
</template>
<script setup >
import MyLeft from './MyLeft.vue'
import MyRight from './MyRight.vue'
import { shallowRef } from 'vue'
const showComponent = shallowRef(MyLeft)
</script>
步骤八：
2 .利用KeepAlive组件实现组件缓存
演示KeepAlive组件的使用
步骤一：
<template>MyLeft组件<div>count值为： {{ count }}<button @click="count++">+1</button></div>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const count = ref(0)
onMounted(() => {console.log('MyLeft组件被挂载了')
})
onUnmounted(() => {console.log('MyLeft组件被销毁了')
})
</script>
步骤二：
<div><KeepAlive><component :is="showComponent"></component></KeepAlive>
</div>
3 .组件缓存相关的生命周期函数
演示组件缓存相关的生命周期函数的使用
步骤一：
<script setup>
import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue'
onActivated(() => {console.log('MyLeft组件被激活了')
})
onDeactivated(() => {console.log('MyLeft组件被缓存了')
})
</script>步骤二：
<script setup>
import { onActivated, onDeactivated } from 'vue'
onActivated(() => {console.log('MyRight组件被激活了')
})
onDeactivated(() => {console.log('MyRight组件被缓存了')
})
</script>
4 . KeepAlive组件的常用属性
注意：
2.插槽
1 . 什么是插槽
1. 定义插槽
2. 使用插槽
演示插槽的使用方法
步骤一：
步骤二：
<template>父组件-----{{ message }}<hr><SlotSubComponent><p>{{ message }}</p></SlotSubComponent>
</template>
<script setup>
import SlotSubComponent from './SlotSubComponent.vue'
const message = '这是组件的使用者自定义的内容'
</script>步骤三：
演示插槽的默认内容：
步骤一：
步骤二：
2. 具名插槽
演示具名插槽的使用
步骤一：
<template><div class="article-container"><div class="header-box"><slot name="header"></slot></div><div class="content-box"><slot name="content"></slot></div><div class="footer-box"><slot name="footer"></slot></div></div>
</template>
<style>
.article-container > div { border: 1px solid black; }
</style>
步骤二：
<template><ArticleInfo><template v-slot:header><p>这是文章的头部区域</p></template><template v-slot:content><p>这是文章的内容区域</p></template><template #footer><p>这是文章的尾部区域</p></template></ArticleInfo>
</template>
<script setup>import ArticleInfo from './ArticleInfo.vue' </script>
步骤三：
3.作用域插槽
1. 定义数据
2. 接收数据
演示作用域插槽的使用
步骤一：
<template><slot message="Hello 默认插槽"></slot><hr><slot message="Hello Vue.js" name="header"></slot><hr><slot :user="user" name="content"></slot>
</template>
<script setup>
import { reactive } from 'vue'
const user = reactive({ name: 'xiaoyuan', age: '15' })
</script>
步骤二：
<template><SubScopeSlot><template v-slot:default="scope"><p>{{ scope }}</p></template><template v-slot:header="scope"><p>{{ scope }}</p><p>{{ scope.message }}</p></template><template #content="{ user }"><p>{{ user.name }}</p><p>{{ user.age }}</p></template></SubScopeSlot>
</template>
<script setup>import SubScopeSlot from './SubScopeSlot.vue'</script>
步骤三：
3.自定义指令
1.什么是自定义指令
2.私有自定义指令的声明与使用
演示私有自定义指令的使用方法
步骤一：
<template><p v-fontSize>DirectiveComponent组件</p>
</template>
<script setup>
const vFontSize = {}
</script>
步骤二：
步骤三：
const vFontSize = {mounted: el => {el.style.fontSize = '24px'}
}
3.全局自定义指令的声明与使用
import { createApp } from 'vue'
import './style.css'
import App from './components/DirectiveComponent.vue'
const app = createApp(App)
app.directive('fontSize', {mounted: el => {el.style.fontSize = '24px'}
})
app.mount('#app')
4.为自定义指令绑定参数
演示自定义指令参数的使用方法
步骤一：
<template><p v-fontSize="fontSize">DirectiveComponent组件</p><button @click=“fontSize = ‘24px’”>更改字号大小</button>
</template>
<script setup>
import { ref } from 'vue'
const fontSize = ref('12px')
const vFontSize = {mounted: (el, binding) => { el.style.fontSize = binding.value },
}
</script>
步骤二：
步骤三：
const vFontSize = {// 原有代码……updated: (el, binding) => {el.style.fontSize = binding.value}
}
5.自定义指令的函数形式
4.引用静态资源
1. 引用public目录中的静态资源
演示引用public目录中静态资源的方法
步骤一：
步骤二：
2. 引用src\assets目录中的静态资源
演示引用src\assets中静态资源的方法
步骤一：
<template><img :src="icon">
</template>
<script setup>
import icon from '../assets/vue.svg'
</script>步骤二：
