vue-grid-layout组件的改装--暴露布局方法

Posted 2023-05-03

参考技术A

vue-grid-layout是一个非常优秀的vue栅格拖动布局的组件,使用方法请参考 官网

属性 GridLayout参数:

上面的属性需要注意的是:

好了,总结上面的内容:

现在有一个需求,当点击按钮的时候,重新布局页面上的栅格系统:

具体实现思路无非就是重新给gridItem赋值,参数可以自定义,但是要注意到校验参数,w与x的值是不能为小数的,因为他们代表的是栅格数,表现到页面上:

栅格数 * 每一个栅格的宽度

完整源码:

Vue 将子组件的方法暴露给父组件

【中文标题】Vue 将子组件的方法暴露给父组件

【英文标题】：Vue expose a method from child component to parent component

【发布时间】：2019-09-02 23:09:25

【问题描述】：

在以下方法中，您认为哪种做法更好？

[1]使用$emit将子组件的方法暴露给父组件

$emit('updateAPI',  exposeAPI( childMethod: this.childMethod ))

或

[ 2 ] 使用父组件中的$refs 访问子组件方法

this.$refs.childComponent.childMethod() 

【问题讨论】：

你应该在这里阅读答案。一切都解释得很好，便于理解。 ***.com/questions/40957008/…

发射 - 绝对。它完全解耦了父元素和子元素以增加可重用性。

【参考方案1】：

关于$refs，据docs：

"$refs 仅在组件渲染后填充，并且 他们没有反应。它仅用作直接的逃生舱口 子操作 - 你应该避免从内部访问 $refs 模板或计算属性。”

关于 callbacks，我没有关于 cons 的信息，并且在 Quasar Framework 的 this component 的脚本部分中有一个很好的示例，它的父组件通过发出一个名为 reset 的函数接收并可以调度这个子函数。这就是为什么我认为这种方式更可取。

【讨论】：

是的..谢谢..我明白了....顺便说一句，到目前为止，我正在使用``$refs``仅用于调用 focus();