工作中面对复杂业务时，常常需要多层嵌套组件, 应当复杂业务时很容易出现props、事件、变量满天飞的情况

下面分享一些我工作中开发嵌套组件的技巧

一、用$attrs和$props来简化vue组件多层嵌套传值

$attrs 是在 vue 的 2.40 版本以上添加的。

中间层组件

<fengmap
  v-if="is3D"
  v-bind="{ ...$attrs, ...$props }"
  :site="site"
  class="dashboard-map__3d"
/>

<script>
  export default {
    //默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings)
    //将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。
    //通过设置 inheritAttrs 到 false，这些默认行为将会被去掉
    inheritAttrs: false,
    props:{
      name:{
        type:boolean,
        default:false
      }
    }
  }
</script>

这个中间层组件会接受父组件传进来的自身定义了的props, 自身没定义的将缓存到$attrs

v-bind="{ ...$attrs, ...$props }" 直接将所有的参数透传到子组件

二、双向绑定：v-model与.sync

在 Vue 中，props 属性是单向数据传输的,父级的 prop 的更新会向下流动到子组件中，但是反过来不行。

可是有些情况，我们需要对 prop 进行“双向绑定”。

上文中，我们提到了使用 v-model 实现双向绑定。但有时候我们希望一个组件可以实现多个数据的“双向绑定”

而 v-model 一个组件只能有一个(Vue3.0 可以有多个)，这时候就需要使用到.sync。

.sync 与 v-model 的异同

相同点：

两者的本质都是语法糖，目的都是实现组件与外部数据的双向绑定

两个都是通过属性+事件来实现的

不同点:

一个组件只能定义一个v-model,但可以定义多个.sync

v-model与.sync对于的事件名称不同，v-model默认事件为input,可以通过配置model来修改，.sync事件名称固定为update:属性名

通常情况下，使用 value 属性与 input 事件没有问题，但是有时候有些组件会将 value 属性或 input 事件用于不同的目的，比如对于单选框、复选框等类型的表单组件的 value 属性就有其他用处