vue注意点：$attrs、$slots！插槽

$attrs

当父组件给子组件传值，子组件并没有接收数据时，此时数据在$attrs中可以拿到，并且如果子组件不需要使用数据，而孙组件需要，则可以直接v-bind="$attrs"传给孙。

<-- 父组件 -->

  

<-- 子组件 -->
主要按钮

这样的写法就会直接将type="primary"传递给孙组件中,子组件不需要使用props来接收，这样写的好处是无需再子组件中定义props，属性有时候也并不确定
同样孙组件中也可以采用props来接受根组件传递过来的参数

子组件有多个根节点时
如果子组件存在多个根节点时，需要手动绑定具体的根节点，否则就会抛出警告

 这样就能解决

vue3中访问$attrs

如果没有使用setup语法糖，则

export default {
  setup(props, context) {
    // 透传 attribute 被暴露为 ctx.attrs
    console.log(context.attrs)
  }
}

$slots

普通插槽
$slots可以拿到父组件所传递过来的所有插槽,它是一个对象，key 名对应着插槽名。

作用域插槽
如果插槽是一个作用域插槽，传递给该插槽函数的参数可以作为插槽的 prop 提供给插槽。