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

Question

我正在尝试为我的搜索栏上的 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 - Album.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>

如果可以的话？

Answer 1

如果你想用 v-model 来做（子组件改变占位符的值）你必须使用 v-model:placeholder 才能工作。而且 placeholderValue 也不是去道具末尾的“值”的方法只需要 modelValue 这是默认的 v-model-binding (v-model="") 但如果你想命名 v-model-binding (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>

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

Dynamic Placeholder in Vue 3 with Global Component

vue.js

vuejs3