VueJS通过渲染传递数据

Question

我目前正在使用VueJS 2，我想将一些参数从HTML传递给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组件中。 我该怎么办？

Answer 1

这是一种方法。

<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）的页面属性，但你可以很容易地把它放在别的地方在页面上像一个隐藏的输入或东西。真的没关系。