vue使用之属性透传

属性透传与实传

实传：prop指定传递的属性; 透传：未指定prop传递的属性传递给子组件嵌套组件

透传实现:
以二次封装ui组件场景为例

使用的api: $attrs, $listeners, inheritAttrs, 渲染函数

// 父组件


// 子组件
const MyButton = {
  // 将未被props指定的属性(不包括style,class)和不含 .native 修饰符的事件监听器绑定到子组件Button上
  template: `

    
  
`,
  components: {
    Button,
  },
  inheritAttrs: false,  // 禁止未被props指定的属性应用到组件根元素上
  props: {
    type: {
      type: String,
      default: 'primary',
    },
  },
  created() {
    console.log(this.$attrs);  // {name: '测试透传', disabled: false}
    console.log(this.$listeners);  // {click: f}
  },
};

// ui组件Button, 直接使用如下

.native绑定事件到子组件根元素
$listeners可用于将事件监听器指向到具体的某个子元素，使用更灵活
将原生事件绑定到组件

引申使用：动态组件透传实现
在上面案例的基础上实现动态生成表单内容

// template

  
  


// configArr
[{
  type: 'Input',
  props: {
    placeholder: '我是默认值',
    clearable: true
  }
}, {
  type: 'Button',
  props: {
    type: 'default'
  }
}]

// 注册新的组件, 使用渲染函数以替代动态组件
// 使用渲染函数解构props，获取attribute绑定
const CompFormItem = {
  components: {
    Input, Select
  },
  name: 'FormItem',
  props: {
    config: {
      required: true
    }
  },
  render (h) {
    // 第一个参数就是配置中的 type，也就是我们的组件名称
    return h(`${this.config.type}`, {
      props: {
        ...this.config.props || {}
      },
      attrs: {
        ...this.config.props || {}
      }
    })
  }
}
// 使用组件

-----关于vue3.x的变更-----

1. $listeners被移除，事件监听器整合到$attrs中
2. $attrs包含style、class属性
3. .native修饰符移除，子组件未定义触发的事件，将被作为子组件的根元素的原生事件监听