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

Question

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

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

（正如您在下面看到的，这是我的尝试，我是v-model根据Vue文档进行的，但是当我尝试使用占位符时，它不起作用......）

代码片段 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也不是在 prop 末尾使用“Value”的方法，仅 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>