將道具傳遞給Vue組件中的元素屬性

Question

當我嘗試將道具傳遞給.vue文件中的HTML元素屬性時，它們只停止渲染。我究竟做錯了什麼？下面的代碼：

的script.js

import hInput from './components/hInput.vue' 
Vue.component('h-input', hInput); 
const app = new Vue({ 
    el: '#head', 
}); 

的index.php

<div id="head"> 
    <h1>{{config('app.name')}}</h1> 
    <h-input placeholder="Hi" name="hello"></h-input> 
</div> 

hInput.vue

<template> 
    <div> 
     <input type="text" placeholder="{{placeholder}}"> 
    </div> 
</template> 

<script> 
    export default { 
     props: ['placeholder', 'name'] 
    }; 
</script> 

Answer 1

使用binding syntax，而不是文本插值。

<template> 
    <div> 
     <input type="text" v-bind:placeholder="placeholder"> 
    </div> 
</template> 

還有一個簡寫。

<template> 
    <div> 
     <input type="text" :placeholder="placeholder"> 
    </div> 
</template>