时间戳

首页 > 解决方案 > 将样式绑定到vue中的子组件

javascript - 将样式绑定到vue中的子组件

问题描述

我有一个子组件。我想将内联样式绑定到该组件中。我想传递这些样式属性（高度：200px；溢出-y：滚动）。

我试过这样传递：

<Childcomponent style="height: 200px; overflow-y: scroll;" />但不工作。

然后我试过这样：

<Childcomponent :style="{'height': '200px'; 'overflow-y': 'scroll'}" />它也不起作用。

如何将内联样式绑定到这个子组件？

标签： javascripthtmlcssvue.js

解决方案

哟可以做到以下几点：

<div style="height: 200px; overflow-y: scroll;">
   <Childcomponent />
</div>

如果你希望它以你的方式完成，你必须在你的组件中创建prop，将样式传递给它，然后将它们应用到组件内部的标签上。

像那样：

在Childcomponent文件中添加

prop {
   myStyles: String;
   ...
}

您将在您想要的标签中使用的那些样式（我相信，在根之一中）。然后您可以通过这种方式从父级传递样式：

<Childcomponent my-styles="height: 200px; overflow-y: scroll;"/>

推荐阅读