我已经开始使用 Vue
,但在尝试使用 props
将数据传递到组件时遇到了问题。在下面的代码中 this.myData
(在 Hello.vue
中)由于某种原因 undefined
App.vue
<script>
import Hello from './components/Hello'
export default {
name: 'app',
data() {
return {
myData: 'this is my data'
}
},
components: {
Hello
} ...
</script>
你好.vue
<script>
export default {
name: 'hello',
props: ['myData'],
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
mounted: function() {
console.log(this.myData)
}
} ...
</script>
最佳答案
你需要在父组件中使用子组件,比如:
// 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>
OP 请求一种方法来将 props 传递给 child 而不在模板中渲染 child 。
所以我发布了一个指向 documentation 的链接
Vue.component('hello', {
render: function (createElement) {
return createElement(
<tag-names>
)
},
props: {
myData: parentComponent.myData // you need to give the parent components' data here.
}
})
关于javascript - Vuejs - 使用 Prop 将数据从 parent 传递给 child ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41668899/