vue 根据data中数据更改组件样式

<template>
  <div class="box" :style="styleVar">
  </div>
</template>
<script>
export default {
  props: {
    height: {
      type: Number,
      default: 54,
    },
  },
  computed: {
    styleVar() {
      return {
        '--box-height': this.height + 'px'
      }
    }
  },
}
</script>
<style scoped>
.box {
  height: var(--box-height);
}
</style>

 

Vue 3,通过父组件修改子组件样式有几种方法: 1. 使用props传递样式数据:在子组件定义props接收父组件传递的样式数据,然后使用动态绑定的方式将这些样式应用到子组件的相应元素上。 父组件: ```html <template> <div> <child-component :style-obj="childStyle"></child-component> <button @click="changeStyle">修改子组件样式</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, data() { return { childStyle: { backgroundColor: 'red', color: 'white', }, }; }, methods: { changeStyle() { this.childStyle = { backgroundColor: 'blue', color: 'yellow', }; }, }, }; </script> ``` 子组件: ```html <template> <div :style="styleObj">子组件</div> </template> <script> export default { props: ['styleObj'], }; </script> ``` 2. 使用ref和teleport:在Vue 3,可以使用teleport将子组件的内容渲染到父组件指定的位置,并使用ref引用子组件的根元素,然后通过修改ref引用的元素样式来达到修改子组件样式的目的。 父组件: ```html <template> <div> <button @click="changeStyle">修改子组件样式</button> <teleport to="#child-container"> <child-component ref="childRef"></child-component> </teleport> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; import { ref } from 'vue'; export default { components: { ChildComponent, }, setup() { const childRef = ref(null); function changeStyle() { const childEl = childRef.value?.$el; if (childEl) { childEl.style.backgroundColor = 'blue'; childEl.style.color = 'yellow'; } } return { childRef, changeStyle, }; }, }; </script> ``` 子组件: ```html <template> <div>子组件</div> </template> <script> export default {}; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值