具有全局组件的 Vue 3 中的动态占位符答案

【问题标题】：Dynamic Placeholder in Vue 3 with Global Component具有全局组件的 Vue 3 中的动态占位符
【发布时间】：2022-12-08 08:57:59
【问题描述】：

我正在尝试为我的搜索栏上的 placeholder 属性设置动态文本。根据页面的不同，我希望搜索栏中的文本有所不同（我将在data()) 中定义它。

但是，由于搜索栏组件是全局组件，因此它似乎不可编辑。

（正如您在下面看到的是我的尝试，我是基于Vue 文档使用v-model 完成的，但是当我尝试使用占位符时它不起作用...）

片段 1- 搜索栏组件

<template>
    <!-- Search Componenet -->
    <div class="mx-5 mb-3 form-group">
        <br>
        <input class="mb-5 form-control" type="search" :placeholder="placeholderValue" :value="modelValue" @load="$emit('update:placeholderValue', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)" />
    </div>
</template>

<script>
export default {
    props: ['modelValue', 'placeholderValue'],
    emits: ['update:modelValue', 'update:placeholderValue']
}
</script>

片段 2- 相册.vue

<template>
    <div class="AlbumView">
    
        <h1>{{header}}</h1>
        <h2>{{header2}}</h2>
        <br>
    
        <!-- Search Componenet -->
    
        <SearchComponent :placeholder="placeholderValue" v-model="searchQuery" />
    
        <!-- Dynamic Song Route Button -->
        <div class="button-container-all mx-5 pb-5">
    
            <div v-for="item in datanew" :key="item.id">
                {{ item.album }}
            </div>
        </div>
    </div>
</template>
<script>
import { datatwo } from '@/data2'
export default {
    data() {
        return {
            placeholderValue: "Search for Albums here...",
            datanew: datatwo,
            searchQuery: null,
            header: "Browse by Album",
            header2: "Select an Album:",
            publicPath: process.env.BASE_URL

        };
    },
}
</script>

如果可能的话？

【问题讨论】：

好的。我认为问题是您在绑定名称中有错字。在搜索栏组件中，prop 名为placeholderValue，但您的绑定是:placeholder="..."，而它应该是:placeholderValue="..."。
TX。但是我怎样才能将该值分配为占位符。
您已经在搜索栏组件中正确地做到了这一点。
此处唯一需要的修复：将 <SearchComponent :placeholder="placeholderValue" v-model="searchQuery" /> 更改为 <SearchComponent :placeholderValue="placeholderValue" v-model="searchQuery" />
您可以删除搜索栏组件中的update:placeholderValue代码。

标签： vue.js vuejs3

【解决方案1】：

如果你想用 v-model 来做（子组件改变占位符的值）你必须使用 v-model:placeholder 才能工作。而且placeholderValue也不是去道具末尾的“价值”的方式只需要modelValue这是默认的v-model-binding（v-model =“”）但是如果你想命名为v-模型绑定 (v-model:placeholder="") 你不想在道具和发射数组中添加“值”。

例子：

SearchComponent 的使用

<SearchComponent :placeholder="'placeholderValue'" v-model="searchQuery" />

而不是'placeholderValue'，您可以放置任何您想要的字符串或变量。我只是以字符串“placeholderValue”为例。

搜索组件

<template>
    <!-- Search Componenet -->
    <div class="mx-5 mb-3 form-group">
        <br>
        <input class="mb-5 form-control" type="search" :placeholder="placeholder" :value="modelValue" @load="$emit('update:placeholderValue', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)" />
    </div>
</template>

<script>
export default {
    name: "SearchComponent",
    props: ['modelValue', 'placeholder'],
    emits: ['update:modelValue'],
}
</script>

<style scoped>

</style>

【讨论】：