文章目录

• 1. jsx父子传值
• 2. provide和inject
• 3. v-memo指令
• 4. Teleport内置组件
• 5. KeepAlive缓存组件
• 6. transition过渡组件

1. jsx父子传值

父组件：

子组件：

// const Child = props => {
//   return (
//     

//       
jsx -- {props.title}
//        props.setTitle(Date.now() + '')}>jsx
//     
//   )
// }// 解构写法
const Child = ({ title, setTitle }) => {return (
jsx -- {title}
 setTitle(Date.now() + '')}>jsx{/*  changeTitle(setTitle)}>jsx */}
)
}export default Child

2. provide和inject

我们想要在组件内实现很方便的通信，却又想要与外界隔绝，这时候就需要用到 provide/inject。

父组件：

子组件：

3. v-memo指令

只要 v-memo 的依赖项没有发生改变，那它的子元素就不会重新渲染，这是一种优化手段。

4. Teleport内置组件

是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

举个例子，当我们利用 v-if 显示和隐藏某些元素的时候，可能会导致整个页面（当前 app 节点） html 结构的变化，从而导致元素样式的变化，这时候我们就可以将这个元素挂载到其他节点中去，于是就可以使用 Teleport 来包裹元素实现。

首先我们在根目录的 index.html 中添加一个新的挂载点：

父组件：

5. KeepAlive缓存组件

是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

6. transition过渡组件

利用过渡组件实现元素的显示与隐藏：

利用过渡组件和动态组件实现在组件间的切换：