VueJS 데이터를 렌더링을 통해 전달

현재 VueJS 2에서 작업 중이므로 일부 매개 변수를 HTML에서 VueJS 구성 요소로 전달하고 싶습니다. 보여 드리죠.VueJS 데이터를 렌더링을 통해 전달

내 HTML을 사업부는 다음과 같습니다

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

그리고 내 자바 스크립트 :

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, 내 애플 리케이션 구성 요소. 어떻게해야합니까?

출처

2017-03-16 Alexis Darnat

id는 이미 속성이므로 prop의 이름이 아닙니다. –

여기에는 한 가지 방법이 있습니다.

<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 
    } 
})

또한, 나는 당신이 속성으로 페이지 (대신 id의) initialValue 렌더링 가정 querySelector을 사용하고 있습니다,하지만 당신은 그냥 간단하게 숨겨진 입력 또는 뭔가처럼 페이지에 다른 곳을 둘 수 있었다. 정말로 중요하지 않습니다.

출처

2017-03-16 21:37:56 Bert

이 작업을 얻는 데 문제가 있었지만 새 Vue() 전에 한 줄에있는 특성 값을 검색하여이를 변수로 저장하고 변수를 속성 값으로 전달하면 작동하는 것처럼 보였습니다. – Zak

VueJS 데이터를 렌더링을 통해 전달

답변

관련 문제