将数据转换为 Vue.js 2 中根组件的 props

Question

这一定很简单，但还没有破解它......

在 vue 中，我想我知道如何将props从父组件传递给子组件。而且我知道我data在 vue 实例的成员中有一个应用程序状态。我不明白的是如何将data状态作为道具进入根应用程序。

似乎有几种方法可以组织 vue 应用程序，所以这就是我正在努力的工作：

索引.ts

import app from './app.vue'

export default new Vue({
    // App Root Element
    el: '#app',
    render: (c) => c('app'),
    components: {
      app
    },
    data: {
        someValue: 42
    }
})

应用程序

<template>
    <div>
        Some Value: {{someValue}}
    </div>
</template>

<script lang="ts">
    export default {
        props: ['someValue']
    };
</script>

我认为它应该类似于以下内容，但我不知道如何直接引用data- 除非我为此目的在 vue 之外保留对它的引用，但这似乎没有必要：

render: (c) => c('app', { someValue: ??? }),

Answer 1

用于this在渲染方法（或方法或计算值等）中获取数据或属性值。如果要在渲染函数this内部使用，请不要使用箭头函数来定义渲染函数。

new Vue({
  el: "#app",
  render(c) {
    return c('app', {props:{someValue: this.someValue}})
  },
  components: {
    app
  },
  data: {
    someValue: 42
  }
})

例子。

new Vue({
  el: "#app",
  render(c) {
    return c('app', {props:{someValue: this.someValue}})
  },
  components: {
    app
  },
  data: {
    someValue: 42
  }
})

console.clear()

const app = {
  props: ["someValue"],
  template: `<div>Some Value: {{someValue}}</div>`
}

new Vue({
  el: "#app",
  render(c) {
    return c('app', {props:{someValue: this.someValue}})
  },
  components: {
    app
  },
  data: {
    someValue: 42
  }
})

正如@RoyJ 指出的，这是文档的关键部分。