Question

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

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

似乎有几种方法来组织一个vue应用程序，所以这就是我正在尝试的工作：

index.ts

import app from './app.vue'

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

app.vue

<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获取render方法中的数据或属性值（或方法或计算值等）。如果您要在其中使用this，请不要使用箭头功能来定义渲染功能。

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

实施例

＆＃13;

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
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  
</div>

＆＃13;

正如@RoyJ指出的那样，这是key section of the documentation。

在Vue.js 2

1 个答案: