Vue的組件屬性傳值問題

<div id="app">
        {{message}}
        <customize prop="xxx"></customize>
    </div>
    <script type="text/javascript">
        //組件對象
    var customize = {
        //組件模板
        template: `<p>
     自定義組件啊{{prop}}
    </p>`,
     // 組件屬性
    // props: ["prop"]
    }
    var app = new Vue({
        el: "#app",
        data: {
            message: '{{message}}:hello customize components'
        },
        components: {
            "customize": customize
        }
    })
    </script>

如上代碼，模板不會渲染出{{prop}}的內(nèi)容，因為：

// props: ["prop"]

而且DOM里面依然保留:
<p prop="xxx">

如果把 “組件屬性”下面的代碼注釋去掉，

props: ["prop"]

則DOM可以渲染，組件屬性渲染完之后則消失了：

所以，這樣有什么實際意義呢？另外，若想傳值給組件的屬性prop應(yīng)該怎么做？