Vue3非setup语法糖：style标签内v-bind动态绑定props

本文讲解如何在Vue 3非setup语法糖组件中，动态绑定props到style标签。由于Vue 3编译器的处理方式，直接在`

在Vue 3非setup语法糖组件中动态绑定props到style标签

本文介绍如何在不使用setup语法糖的Vue 3组件中，通过v-bind动态绑定从props接收的数据到style标签。 直接在标签内使用props.width等方式无效，因为Vue 3编译器处理和的方式不同。

问题：在标签内无法直接访问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标签。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~