有没有办法在 Vue 的方法之外访问道具？

Question

<script lang='ts'>
import GraphWorld from '@/components/GraphWorld.vue'
//  import { defineComponent } from "vue"
export default {
  name: 'GraphView',
  props: ['people', 'prac'],
  components: {
    GraphWorld
  },
  setup() {
    const nodes={}
    const edges={}
    const n= 5
    //  var x = this.prac
    for (let i = 1; i <= n; i++) {
    nodes[`node${i}`] = {
    name: `Node ${i}`
  };
}
    for (let i=1;i<=n-1;i++){
      edges[`edge${i}`]={
        source:`node${i}`,
        target:`node${i+1}`
      }
    }    
    return { nodes, edges }
  },
  methods: {
  }
}

我想在 setup() 中使用“prac”，基本上 prac 是一个 json，我想遍历它来创建节点和边。有没有办法做到这一点，我尝试在 setup() 中直接使用 this.prac，但这给了我一个错误。我还尝试在方法内部移动 setup() 但这会导致其他问题。任何建议表示赞赏。

编辑：以下最终完美运行：

import { reactive, toRefs } from 'vue'
import GraphWorld from '@/components/GraphWorld.vue'
import { defineComponent } from "vue"
export default defineComponent ({
  name: 'GraphView',
  props: ['people', 'prac'],
  components: {
    GraphWorld
  },
  setup(props) {
    const nodes={}
    const edges={}
    const { prac } = toRefs(props)
    const n = reactive( prac.value )
    //  const n= prac.length
    for (let i = 0; i < n.length; i++) {
    nodes[`node${i}`] = {
    name: `${n[i].Organizations}`
  },
  nodes[`node${i+n.length}`] = {
    name: `${n[i].Title}`
  };
}
    for (let i=0;i<n.length;i++){      
      edges[`edge${i}`]={
        source:`node${i}`,
        target:`node${i+n.length}`
      }
    }   
    return { nodes, edges }
  }

Answer 1

您可以使用 props 参数在 setup() 中访问您的道具，如下所示：

<script lang='ts'>
import GraphWorld from '@/components/GraphWorld.vue'

export default {
  name: 'GraphView',
  props: ['people', 'prac'],
  components: {
    GraphWorld
  },
  setup(props) {
    const prac = props.prac
    // use your props here
    return {}
  }
}
</script>

see more here

有没有办法在 Vue 的方法之外访问道具？

Is there a way to access props outside methods in Vue?

typescript

vue.js