Question

如何通过组件的属性props设置样式

Answer 1

在该组件的内部添加了mapHeight属性，如下：
props:{
// 地图在该视图上的高度
mapHeight:{
type: Number,
default: 200
}
}

然后要在地图的div中通过样式设置该div的高度，，可以有以下三种方式：
第一种：
<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>

使用这种方式在chrome中没问题，但是如果打开chrome的控制台就会发现vue给出如下警告，也就是在ie中会有问题。
vue.common.js?e881:1019
[Vue warn]: style="width: 100%; height: {{mapHeight}}px": interpolation
in "style" attribute will cause the attribute to be discarded in
Internet Explorer. Use v-bind:style instead.

第二种：
关于如何使用绑定方式来设置样式，可以参考：
http://cn.vuejs.org/guide/class-and-style.html#u5BF9_u8C61_u8BED_u6CD5-1
然后我设置的样式如下：
<div id="allmap" :style="{width: '100%', height: mapHeight + 'px'}"></div>

经过验证是OK的，可以正常显示。

第三种：
但是根据vue中的官方说法，

使用样式对象的方式更好

<div id="allmap" v-bind:style="mapStyle"></div>

同时在data属性中添加如下属性：
data: function() {
return {
mapStyle: {
width: '100%',
height: this.mapHeight + 'px'
}
}
},

所以，最终选择第三种方式。

Answer 2

在该组件的内部添加了mapHeight属性，如下：
props:{
// 地图在该视图上的高度
mapHeight:{
type: Number,
default: 200
}
}

然后要在地图的div中通过样式设置该div的高度，，可以有以下三种方式：
第一种：
<div id="allmap" style="width: 100%; height: {{mapHeight}}px"></div>

使用这种方式在chrome中没问题，但是如果打开chrome的控制台就会发现vue给出如下警告，也就是在ie中会有问题。
vue.common.js?e881:1019
[Vue warn]: style="width: 100%; height: {{mapHeight}}px": interpolation
in "style" attribute will cause the attribute to be discarded in
Internet Explorer. Use v-bind:style instead.

第二种：
关于如何使用绑定方式来设置样式，可以参考：
http://cn.vuejs.org/guide/class-and-style.html#u5BF9_u8C61_u8BED_u6CD5-1
然后我设置的样式如下：
<div id="allmap" :style="{width: '100%', height: mapHeight + 'px'}"></div>

经过验证是OK的，可以正常显示。