vue中通过js控制scss变量

<!--
 * @Description:
 * @Author: 李大玄
 * @Date: 2022-07-28 20:34:43
 * @FilePath: /web-framework-demo/src/views/layout.vue
 * @LastEditors: 李大玄
 * @LastEditTime: 2022-11-01 09:25:31
-->
<template>
  <div height="100%" class="b">
    <input type="text" v-model="val">
    <Application  :style="`--bgC: ${val}`">    </Application>
  </div>
</template>

<script>
const bindPhoneIndex = 3;
export default {
  name: "App",
  data() {
    return {
      val: ''
    };
  }
};
</script>

<style lang="scss">
:root {
  --bgC: red;
}
.btnName {
  background: #000 ;
  background: var(--bgC);
}
</style>