通數據

Question

我一直在試圖從我的Rails傳遞數據查看到Vue的組件描述here

一切正常，就像預期的，但我寧願難倒如何訪問我通過道具傳入的數據。沒有出現在任何地方的Vue開發工具中，我無法通過擺弄Vue對象來找到它。

有人能指出我正確的方向。我相當綠色Vue的，所以努力甚至不知道該怎麼尋找：/

show.html.erb

<%= javascript_pack_tag 'test_vue' %> 
<%= stylesheet_pack_tag 'test_vue' %> 
<%= content_tag :div, id: "test", data: { 
          message: "this wont!", 
          name: "nor will this!" }.to_json do %> 
<% end %> 

test.vue

<template> 
    <div id="app"> 
    <p>{{test}}{{message}}{{name}}</p> 
    </div> 
</template> 

<script> 
    export default { 
    data: function() { 
     return { 
      test: 'This will display', 
     } 
    } 
    } 
</script> 

<style> 
</style> 

test_vue.js

import Vue from 'vue' 
import Test from './test.vue' 
document.addEventListener('DOMContentLoaded',() => { 
    const node = document.getElementById('test') 
    const props = JSON.parse(node.getAttribute('data')) 
    new Vue({ 
     render: h => h(Test, { props }) 
    }).$mount('#test'); 
}) 

Answer 1

看起來像所有你需要做的是在您的組件聲明的屬性：

<template> 
    <div id="app"> 
    <p>{{test}}{{message}}{{name}}</p> 
    </div> 
</template> 

<script> 
    export default { 
    props: ["message","name"], 
    data: function() { 
     return { 
      test: 'This will display', 
     } 
    } 
    } 
</script> 

<style> 
</style> 

這將是relevant documentation。

子組件需要顯式聲明，預計到 道具接收使用道具選項