Vue.js 3：如何获取道具值并在脚本设置中的函数中使用它？

Question

我们都喜欢 vue 3 新脚本设置，但由于使用率低且支持较少，因此很难转移到它。我在 functions.My 代码中获取和使用道具值时遇到问题，如下所示

<script setup>
defineProps({
  text: String,
  howShow: Number,
  text1: String,
  text2: String,
  text3: String,
  widths: {
    type: String,
    default: "100%",
  },
})
</script>

Answer 1

你可以通过这样做来解决这个问题

<script setup>
import { toRefs } from "@vue/reactivity";
const props = defineProps({
  text: String,
  howShow: Number,
  text1: String,
  text2: String,
  text3: String,
  widths: {
    type: String,
    default: "100%",
  },
})
const { widths } = toRefs(props);
let getValue = () => {
  console.log("Getting Value");
  console.log(widths.value);
};
</script>

这一切享受

Answer 2

要访问数据，您只需使用：props.widths

在您的子组件中定义 props 之后：

<script setup>
import { computed } from 'vue'
const props = defineProps({
  widths: {
    type: String,
    default: '100%',
  }
})
// do some stuff
// access the value by 
// let w = props.widths
</script>

在您的模板区域中，您可以直接使用 widths:

访问该值

<div :style="{ width: widths }" />

Vue.js 3：如何获取道具值并在脚本设置中的函数中使用它？

Vue.js 3: How to get props value and use it in functions in script setup?

vue.js

tailwind-css

vuejs3

vue-composition-api

vue-script-setup