当我try 将props 传递给.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>

推荐答案

使用binding syntax,而不是文本插值.

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

还有一个速记.

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

Vue.js相关问答推荐

检测Vue3/Vue-test-utils中的Vuex还原/Mutations

使用内部方法创建计算(computed)属性是否合法?

Nuxt3: 安装vue3-spinner (error: require is not defined in ES module scope)

vue3 输入标签给出错误 Vue.use 不是函数

在 Vue 中删除自定义组件代码重复的方法?

如何从mustache内的过滤器输出html

Vue:在表格中显示嵌套数据

使用 jquery-chosen 插件更新 vuejs 模型值

使用 vue.js 的 axios 预检失败错误 301

ECMA6 中 nameFunction() {} 和 nameFunction () => {} 的区别

单击复选框后,V-model 未更新

Vuejs:我应该在 vue-router SPA 中的哪里放置一些常用的 js 工具?

所有 vue props和数据都给出错误 Property属性在 type 上不存在,带有 typescript

即使在生产模式下构建,VueJS 也会显示开发模式开发模式消息

Vue如何将动态ID与v-for循环+字符串中的字段连接起来?

将 SignalR 与 Vue.js 和 Vuex 集成

Vue3在按钮单击时以编程方式创建组件实例

单击时交换组件

Vuejs获取事件正在调用的元素?

Vuex Mutation 正在运行,但组件在 vue 开发工具中手动提交之前不会更新