我们开发中经常需要封装一些第三方组件那么父组件应该怎么传值怎么调用封装好的组件原有的属性、插槽、方法一个个调用虽然可行但十分麻烦我们一起来看更简便的方法。

二次封装组件属性怎么传

v-bind“$attrs”可以将属性全部传给封装起来的组件如下面例子中的

el-input

如果这里有placeholder下面输出attrs就不会有这个placeholder

});

templatedivMyInputv-modeltextplaceholder请输入地址reffocusRefinputinputNumtemplate

#prepend{}el-select

{console.log(attrs);console.log(slots);console.log(inp.value);

});

inp.value?.[prop];},has(_target,

prop)

二次封装组件时经常需要往原组件的插槽中传递内容这时要让原始组件知道我们使用了哪些插槽可以使用

$slots

{console.log(attrs);console.log(slots);

输出如下图

focusRef.value.inp.value.focus()但代码的可读性差

Proxy

将这个代理暴露给父组件。

这个代理的目的是拦截对特定属性的访问并将这些访问重定向到

inp.value即

{console.log(attrs);console.log(slots);console.log(inp.value);

这里输出如下图

inp.value?.[prop];},has(_target,

prop)