1. jsx父子传值
父组件：
<template>
<div>
<child :title="title" :setTitle="setTitle" />
</div>
</template>
<script>
import {
ref } from 'vue'
// 如果你用的是.jsx或.tsx，则引入时，扩展名不要写
import child from './components/child'
export default {
components: {
child },
setup() {
let title = ref('测试')
const setTitle = titleStr => (title.value = titleStr)
return {
title, setTitle }
}
}
</script>
<style lang="scss" scoped></style>
子组件：
// const Child = props => {
// return (
// <div>
// <h3>jsx -- {props.title}</h3>
// <button onClick={() => props.setTitle(Date.now() + '')}>jsx</button>
// </div>
// )
// }
// 解构写法
const Child = ({ title, setTitle }) => {
return (
<div>
<h3>jsx -- {title}</h3>
<button onClick={() => setTitle(Date.now() + '')}>jsx</button>
{/* <button onClick={() => changeTitle(setTitle)}>jsx</button> */}
</div>
)
}
export default Child
2. provide和inject
我们想要在组件内实现很方便的通信，却又想要与外界隔绝，这时候就需要用到 provide/inject。
父组件：
<template>
<div>
<child />
</div>
</template>
<script>
import {
ref, provide } from 'vue'
import child from './components/child.vue'
export default {
components: {
child },
setup() {
let title = ref('测试')
// 在祖先组件中发布了一个数据
// 如果你发布的数据它是一个响应式对象，则provide它就是一个响应式，如果是一个普通值和对象，则不是响应式
provide('title', title)
// 这种方式可以将会使发布的数据变为普通对象，无法响应
// provide('title', title.value)
return {
title }
}
}
</script>
<style lang="scss" scoped></style>
子组件：
<template>
<div>
<h3>{
{ title }}</h3>
<button @click="title = 1323">+++++</button>
</div>
</template>
<script>
import {
inject } from 'vue'
export default {
setup() {
let title = inject('title')
console.log(title)
return {
title }
}
}
</script>
<style lang="scss" scoped></style>
3. v-memo指令
只要 v-memo 的依赖项没有发生改变，那它的子元素就不会重新渲染，这是一种优化手段。
<template>
<div>
<!-- v-memo它依赖项没有发生改变，则它子元素不会重新渲染，优化 -->
<!-- <div v-memo="[names.length]"> -->
<div v-memo="[num]">
<ul v-for="item of names" :key="item">
<li> {
{ item }}</li>
</ul>
</div>
<button @click="addNames">++++</button>
</div>
</template>
<script>
import {
ref, watch } from 'vue'
export default {
setup() {
let num = ref(0)
let names = ref(['乐乐', '英子', '小森', '亮亮'])
// 这里只是让names变量发生了变化，而v-memo的依赖项为num，所以这时候视图并不会重新渲染
const addNames = () => names.value.push(Date.now())
watch(
// 只要names属性发生了变化，就修改num的值
names,
n => {
num.value = n.length
},
{
deep: true, immediate: true }
)
return {
num, names, addNames }
}
}
</script>
<style lang="scss" scoped>
</style>
4. Teleport内置组件
<Teleport> 是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。
举个例子，当我们利用 v-if 显示和隐藏某些元素的时候，可能会导致整个页面（当前 app 节点） html 结构的变化，从而导致元素样式的变化，这时候我们就可以将这个元素挂载到其他节点中去，于是就可以使用 Teleport 来包裹元素实现。
首先我们在根目录的 index.html 中添加一个新的挂载点：
父组件：
<template>
<div>
<button @click="isShow = !isShow">点击显示</button>
<Teleport to="#other">
<div v-if="isShow" class="modal">
<h3>提示框</h3>
<div>欢迎登录页面</div>
</div>
</Teleport>
</div>
</template>
<script>
import {
ref } from 'vue'
export default {
setup() {
let isShow = ref(false)
return {
isShow }
}
}
</script>
<style lang="scss" scoped></style>
5. KeepAlive缓存组件
<KeepAlive> 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。
<template>
<div>
<button @click="cmp = 'child1'">child1</button>
<button @click="cmp = 'child2'">child2</button>
<!-- 只缓存 child2 中的内容 -->
<!-- <KeepAlive :include="['child1']"> -->
<!-- 如果是字符串，则一定不能有多余空格,多个以逗号隔开 -->
<!-- <KeepAlive include="child1"> -->
<!-- 使用正则匹配 -->
<KeepAlive :include="/child/">
<component :is="cmp"></component>
</KeepAlive>
</div>
</template>
<script>
import {
ref } from 'vue'
import child1 from './components/child1.vue'
import child2 from './components/child2.vue'
export default {
components: {
child1,
child2
},
setup() {
let cmp = ref('child1')
return {
cmp }
}
}
</script>
<style lang="scss" scoped></style>
6. transition过渡组件
利用过渡组件实现元素的显示与隐藏：
<template>
<div>
<button @click="isShow = !isShow">点击显示</button>
<!-- 样式前缀，以v-开头 -->
<Transition name="v">
<div v-if="isShow" class="modal">
<h3>提示框</h3>
<div>欢迎登录页面</div>
</div>
</Transition>
</div>
</template>
<script>
import {
ref } from 'vue'
export default {
setup() {
let isShow = ref(false)
return {
isShow }
}
}
</script>
<style lang="scss" scoped>
// enter 进场
// leave 出场
/* 在进场和退场的过程中，进行透明度的变化 */
.v-enter-active,
.v-leave-active {
transition: opacity 0.6s ease;
}
/* 进场开始和退场的结束 */
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>
利用过渡组件和动态组件实现在组件间的切换：
<template>
<div>
<button @click="activeComponent = 'child1'">child1</button>
<button @click="activeComponent = 'child2'">child2</button>
<!-- 模式：先进入后退出 -->
<!-- <Transition name="v" mode="in-out"> -->
<!-- 模式：先退出后进入 -->
<Transition name="v" mode="out-in">
<component :is="activeComponent"></component>
</Transition>
</div>
</template>
<script>
import {
ref } from 'vue'
import child1 from './components/child1.vue'
import child2 from './components/child2.vue'
export default {
components: {
child1,
child2
},
setup() {
let isShow = ref(true)
let activeComponent = ref('child1')
return {
isShow, activeComponent }
}
}
</script>
<style lang="scss" scoped>
// enter 进场
// leave 出场
/* 在进场和退场的过程中，进行透明度的变化 */
.v-enter-active,
.v-leave-active {
transition: opacity 0.3s ease;
}
/* 进场开始和退场的结束 */
.v-enter-from,
.v-leave-to {
opacity: 0;
}
</style>
