分享 5 个 Vue 开发小技巧

2022 年 7 月 18 日
本文字数：1096 字
阅读完需：约 4 分钟

1. 子组件数据变化，父组件跟着变化

在某些场景，父组件的属性依赖子组件属性变化而变化，而 Vue 是单向数据流传输，无法子组件反过来影响父组件。不过，我们可以借助一些技巧可以实现反向传输而实时更新属性的值。

通过在父组件定义一个默认值，然后使用 .sync将属性绑定到子组件中，达到异步更新。
在子组件中，通过监听要传递的值，然后使用 $emit('update:更新的父组件属性', 更新的值)

<Son @receiveData="getData" :str.sync="str"></Son>

复制代码

watch:{  content(val){    this.$emit("update:str",val)  }},

复制代码

2. Props 配置

type：配置属性传递类型
default：默认值，对于对象或者数组必须从函数中返回
required：是否必须传递值
Validator: 自定义验证函数

props:{  title:{    type: String,      required: true,        default:"测试",          validator: function (val){            return val.length > 3          }  }},

复制代码

3.灵活使用插槽

通常在封装组件时，使用的最多的就是插槽了，通过插槽可以自定义内容，甚至可以灵活的动态插槽,通过在父组件中定义一组数据，来决定在子组件中那个位置显示什么数据。

<h3>动态插槽</h3><div class="container-b">  <div v-for="(item,index) in tagList" :key="index" :style="{flex:1, background: index == 0 ? red : orange }">    <slot :name="item.name" :data="item"></slot>  </div></div>

复制代码

<Son  :tagList="tagList">  <template #TGA="prop">    <div>      <h2>{{prop.data.name}}</h2>      <hr>      <h3>{{prop.data.tagName}}</h3>    </div>  </template></Son>

复制代码

data() {  return {    tagList:[      {        name:"TGA",        tagName: "技术"      },      {        name: "LIFE",        tagName: "生活"      }    ]  };},

复制代码

4. 动态组件

多个组件在同一个位置显示时，就是所谓的动态组件。满足一定的条件才会显示对应的组件，可以通过 component组件来实现， is 绑定动态的组件名字即可。

使用 keep-alive 缓存切换组件的状态

<button @click="setComponentsName">切换组件显示</button><keep-alive>  <component :is="changeName"></component></keep-alive>

复制代码

5. 关于路由

路由实现的两种方式：

hash 路由： location.hash + hashchange 事件
通过读取 location.hash 可以知道当前页面所处的位置，通过 hashchange 事件监 location.hash 变化，然后进行处理。
history： history.pushState() + popState 事件
可以通过 pushState 来改变当前的 URL 的地址， popState 事件来监听 URL 地址的变化。 pushState() + replaceState 配合使用不会引起页面刷新。