Javascript Vuejs-使用道具将数据从父级传递到子级

我已经开始玩

Vue

，但在尝试使用

props

向组件传递数据时遇到了一个问题。在下面的代码中，

这个.myData

（在

Hello.vue

中）由于某种原因是

未定义的

App.vue

<script>
import Hello from './components/Hello'

export default {
  name: 'app',
  data() {
    return {
      myData: 'this is my data'
    }
  },
  components: {
    Hello
  } ...
 </script>


从“./components/Hello”导入Hello
导出默认值{
名称：“应用程序”，
数据（）{
返回{
myData:'这是我的数据'
}
},
组成部分：{
你好
} ...

你好，vue

<script>
export default {
  name: 'hello',
  props: ['myData'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
  mounted: function() {
       console.log(this.myData)
   }
} ...
</script>


导出默认值{
姓名：'你好'，
道具：['myData']，
数据（）{
返回{
msg:'欢迎使用您的Vue.js应用程序'
}
}
挂载：函数（）{
console.log（this.myData）
}
} ...
您需要在父类中使用子组件，因此：

// inside app.vue
<template>
  <hello :myData='myData'></hello> // I believe this is your objective
</template> //:myData is binding the property from the components data field, without using it, you will get myData as `string` in the child component.

<script>
  export default {
  name: 'app',
  data() {
    return {
      myData: 'this is my data'
    }
  },
  components: {
    Hello
  }
</script>

//在app.vue内部
//我相信这是你的目标
//：myData正在从components数据字段绑定属性，如果不使用它，您将在子组件中以'string'的形式获取myData。
导出默认值{
名称：“应用程序”，
数据（）{
返回{
myData:'这是我的数据'
}
},
组成部分：{
你好
}

OP请求了一种在不在模板中呈现子对象的情况下将道具传递给子对象的方法

所以我发布了一个链接到

Vue.component（'hello'{
渲染：函数（createElement）{
返回createElement(
)
},
道具：{
myData:parentComponent.myData//您需要在此处提供父组件的数据。
}
})
您需要在父类中使用子组件，因此：

// inside app.vue
<template>
  <hello :myData='myData'></hello> // I believe this is your objective
</template> //:myData is binding the property from the components data field, without using it, you will get myData as `string` in the child component.

<script>
  export default {
  name: 'app',
  data() {
    return {
      myData: 'this is my data'
    }
  },
  components: {
    Hello
  }
</script>

//在app.vue内部
//我相信这是你的目标
//：myData正在从components数据字段绑定属性，如果不使用它，您将在子组件中以'string'的形式获取myData。
导出默认值{
名称：“应用程序”，
数据（）{
返回{
myData:'这是我的数据'
}
},
组成部分：{
你好
}

OP请求了一种在不在模板中呈现子对象的情况下将道具传递给子对象的方法

所以我发布了一个链接到

Vue.component（'hello'{
渲染：函数（createElement）{
返回createElement(
)
},
道具：{
myData:parentComponent.myData//您需要在此处提供父组件的数据。
}
})
是的，这种方式是有效的。因此数据应该始终通过模板？如果我只想传递数据而不实际呈现数据（例如某些配置设置），该怎么办？有一些方法可以实现组件之间的数据交换，这些方法不需要模板呈现，比如使用
eventBus
或使用vuex store。对于您的情况，道具似乎是最好的方法，为此，您需要在模板中呈现子组件。尽管有一种方法，我会更新我的答案，但c所有的渲染功能。这看起来还好吗？谢谢！我不介意使用道具。这似乎是正确的方法。只是还没有弄清楚数据是通过模板传输的。@StefanStoichev它的设计是这样的，所以只需查看父模板，我们就可以了解dom结构以及它之间的数据流还有它的孩子，不受详细逻辑的困扰（因为他们在
脚本
部分）@AmreshVenugopal当父级和子级都是Vue单文件组件时，如何在子级中设置
parentComponent.myData
？是的，这种方式是有效的。因此数据应该始终通过模板？如果我只想传递数据而不实际呈现它（例如某些配置设置），该怎么办？有一些方法可以实现组件之间的数据交换，这些方法不需要模板呈现，比如使用
eventBus
或使用vuex store。对于您的情况，道具似乎是最好的方法，为此，您需要在模板中呈现子组件。尽管有一种方法，我会更新我的答案，但c所有的渲染功能。这看起来还好吗？谢谢！我不介意使用道具。这似乎是正确的方法。只是还没有弄清楚数据是通过模板传输的。@StefanStoichev它的设计是这样的，所以只需查看父模板，我们就可以了解dom结构以及它之间的数据流以及它的子项，而不受详细逻辑的干扰（因为它们在
脚本
部分）@AmreshVenugopal当父项和子项都是Vue单文件组件时，如何在子项中设置
parentComponent.myData
？