Vue 组合 api - 将变量传递给我的组件 data() 选项？

Question

如果我在设置中设置一个变量

 setup(props, context) {
    
        let name = "Tommy";
    }

是否可以设置它以便在组件中使用它？

data() {
    return {
      myName: name
    }
  },

我可以在模板中访问它，但不能在任何组件方法中访问。即使我把它放在 onMounted 钩子中。

setup(props, context) {
  
    onMounted(() => {
    let name = "Tommy";
    }
}

Answer 1

可以在组件中使用它，甚至可以在 data 选项中使用它：

data() {
    return {
      myname: this.name
    }
}

尽管 myname 不会对 name

中的变化做出反应

Answer 2

选项 api 的行为不同于组合 api，并且在两者 api 之间交换 properties/methods 是一种不好的做法，在您的情况下，您可以定义一个属性在设置挂钩中并将其暴露给模板：

import {ref} from 'vue'

 setup(props, context) {
      const name = ref("Tommy");
      
  return{
    myName:name
   }

}

Answer 3

还要记住，如果你想在 setup 方法中修改变量的值，如果变量被初始化为“ref”，你必须明确地访问 .value 成员

import {ref} from 'vue'

 setup(props, context) {
      const name = ref("Tommy");
      const fullName = name.value + " Hanks"
      
  return{
    myName:name,
    fullName
   }

}

在模板中，您不需要访问 setup 方法返回的 ref 的值。您只需使用 ref 元素，因为 .value 在模板中隐式访问。

Vue 组合 api - 将变量传递给我的组件 data() 选项？

Vue composition api - pass a variable to my component data() option?

vue.js

vue-component

vuejs3

vue-composition-api