将道具传递给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>