<div class="goods" :style="{ height: props.height }"></div>传入高度不生效

可能原因有以下几种：

1. 父组件没有传入 height 属性或者传入的 height 值不正确。

2. 组件内部没有对 props.height 进行响应式处理，应该使用 `props: ['height']` 或者 `props: { height: { type: Number } }` 进行声明。

3. 组件内部没有使用 props.height 属性，或者使用了错误的属性名。

4. 在修改组件的高度时，没有使用 Vue.set() 或者 this.$set() 方法进行修改。

您可以检查一下这些可能的原因，找出问题所在并进行修复。

相关问题

<div class="s-canvas"> <canvas id="s-canvas" :width="props.contentWidth" :height="props.contentHeight"></canvas> </div>

这段代码是一个 Vue 组件的模板，包含一个 canvas 标签和一些属性绑定。其中，id 为 s-canvas 的 canvas 元素的宽度和高度分别绑定到 props 的 contentWidth 和 contentHeight 属性上。这个 canvas 元素可能用于绘制图形或动画等交互式内容。

<!-- 结算模块 --> <div class="cart-floatbar"> <div class="select-all"> <input type="checkbox" name="" id="d" class="checkall">全选 </div> <div class="operation"> <a href="javascript:;" class="remove-batch"> 删除选中的商品</a> <a href="javascript:;" class="clear-all">清理购物车</a> </div> <div class="toolbar-right"> <div class="amount-sum">已经选<em>1</em>件商品</div> <div class="price-sum">总价： <em> </em></div> <div class="btn-area">去结算</div> </div> </div>帮我改成组件

可以将上述代码封装成一个名为 "CartFloatBar" 的组件，代码如下所示：

<template>
  <div class="cart-floatbar">
    <div class="select-all">
      <input type="checkbox" name="" id="d" class="checkall">全选
    </div>
    <div class="operation">
      <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
      <a href="javascript:;" class="clear-all">清理购物车</a>
    </div>
    <div class="toolbar-right">
      <div class="amount-sum">已经选<em>{{ selectedCount }}</em>件商品</div>
      <div class="price-sum">总价： <em>{{ totalPrice }}</em></div>
      <div class="btn-area">去结算</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CartFloatBar',
  props: {
    selectedCount: {
      type: Number,
      default: 0
    },
    totalPrice: {
      type: Number,
      default: 0
    }
  }
}
</script>

在使用该组件时，可以通过传递不同的 props 来动态显示已选商品数量和总价。例如：

<CartFloatBar :selectedCount="1" :totalPrice="99"></CartFloatBar>