VueJS Truyền dữ liệu Qua render

Question

Tôi hiện đang làm việc với VueJS 2, tôi muốn chuyển một số thông số từ HTML đến thành phần VueJS. Tôi se cho bạn xem.

My Html Div trông như thế này:

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

Và javascript của tôi:

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

My App Component:

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

Tôi muốn để có được id thông qua tại Html, trong thành phần Ứng dụng của tôi. Tôi nên làm như thế nào?

Answer 1

Đây là một cách.

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

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

Nhưng bạn không phải sử dụng chức năng hiển thị.

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

Ngoài ra, tôi đang sử dụng querySelector giả sử bạn render initialValue (thay vì id) để trang như là một thuộc tính, nhưng bạn có thể chỉ là một cách dễ dàng đặt nó ở một nơi khác trên trang giống như một đầu vào ẩn hoặc một cái gì đó. Thực sự không quan trọng.