VueJS Przekazywanie danych przez renderowanie

Question

Obecnie pracuję z VueJS 2, chciałbym przekazać niektóre parametry z HTML do komponentu VueJS. Pokażę ci.

My HTML Div wygląda następująco:

<div id="app" :id="1"></div> 

A mój javascript:

new Vue({ 
    store, // inject store to all children 
    el: '#app', 
    render: h => h(App) 
}); 

My App Składnik:

<template> 
    <div> 
    {{ id }} 
    </div> 
</template> 
<script> 
export default { 
    props: { 
    id: Number 
    } 
} 
</script> 

Chciałbym uzyskać identyfikator przekazywane w HTML, w moim elemencie App. Jak mam to zrobić?

Answer 1

Oto jeden sposób.

<div id="app" data-initial-value="125"></div> 

new Vue({ 
    el: '#app', 
    render: h => h(App, { 
    props:{ 
     id: document.querySelector("#app").dataset.initialValue 
    } 
    }) 
}) 

Ale nie trzeba używać funkcji renderowania.

new Vue({ 
    el: '#app', 
    template:"<app :id='id'></app>", 
    data:{ 
    id: document.querySelector("#app").dataset.initialValue 
    }, 
    components:{ 
    App 
    } 
}) 

Również używam querySelector zakładając renderowane initialValue (zamiast id) na stronie jako atrybut, ale można równie łatwo umieścić go gdzieś na stronie, jak ukryty wejścia lub coś. Naprawdę nie ma znaczenia.