VueJS通过渲染传递数据
问题描述:
我目前正在使用VueJS 2,我想将一些参数从HTML传递给VueJS组件。我来给你展示。VueJS通过渲染传递数据
我的HTML DIV看起来是这样的:
<div id="app" :id="1"></div>
而且我的javascript:
new Vue({
store, // inject store to all children
el: '#app',
render: h => h(App)
});
我的应用组件:
<template>
<div>
{{ id }}
</div>
</template>
<script>
export default {
props: {
id: Number
}
}
</script>
我想获得的ID在传递Html,在我的App组件中。 我该怎么办?
答
这是一种方法。
<div id="app" data-initial-value="125"></div>
new Vue({
el: '#app',
render: h => h(App, {
props:{
id: document.querySelector("#app").dataset.initialValue
}
})
})
但是,您不必使用渲染功能。
new Vue({
el: '#app',
template:"<app :id='id'></app>",
data:{
id: document.querySelector("#app").dataset.initialValue
},
components:{
App
}
})
而且,我使用querySelector
假设你呈现initialValue
(而不是id
)的页面属性,但你可以很容易地把它放在别的地方在页面上像一个隐藏的输入或东西。真的没关系。
+1
我无法按原样工作,但是如果在新Vue()之前检索一行上的属性值,将其作为变量存储并将该变量作为属性值传递 – Zak
id不是一个道具的好名字,因为它已经是一个属性。 –