在Vue 3非setup語法糖組件中動態綁定props到style標籤 本文介紹如何在不使用setup語法糖的Vue 3組件中，通過v-bind動態綁定從props接收的數據到style標籤。 直接在标签内使用<code>props.width等方式无效，因为Vue 3编译器处理<code><template>和<code><style>的方式不同。 问题：在标签内无法直接访问props。 解决方案：在setup函数中返回props对象，然后在中通过v-bind访问这些属性。 修改后的script部分代码： export default { props: { width: { type: String, default: '250px' }, height: { type: String, default: '45px' }, color: { type: String, default: '#fff' }, bgcolor: { type: String, default: '#3a8bff' }, btntxt: { type: String } }, name: 'download-btn', setup(props, { emit }) { const click = (event) => { emit('ctaclick', event) }; return { props, click }; } };登入後複製 修改后的部分代码： .download-btn { width: :v-bind(props.width); height: :v-bind(props.height); color: :v-bind(props.color); background-color: :v-bind(props.bgcolor); font-size: 20px; display: flex; justify-content: center; align-items: center; border-radius: 15px; /* .showline(1); // 此行代码含义不明确，建议移除或解释 */ }登入後複製 注意：在中使用v-bind时，需要在属性值前加上冒号:。 通过此方法，即可在非setup语法糖的Vue 3组件中，动态绑定props到style标签。
