[英]Vuejs - pass data from parent to child with props
我已经开始使用Vue
,但在尝试使用props
将数据传递给组件时遇到了问题。 在下面的代码中this.myData
(在Hello.vue
中)由于某种原因undefined
应用程序.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 请求了一种将道具传递给孩子而不在模板中渲染孩子的方法。
所以我发布了文档的链接
Vue.component('hello', {
render: function (createElement) {
return createElement(
<tag-names>
)
},
props: {
myData: parentComponent.myData // you need to give the parent components' data here.
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.