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）的頁面屬性，但你可以很容易地把它放在別的地方在頁面上像一個隱藏的輸入或東西。真的沒關係。