[英]Vue.js - append variable to component
I am currently using Algolia instantsearch for Vue, which is working fine.我目前正在为 Vue 使用 Algolia Instantsearch,它运行良好。 However, I am using multiple indexes, so I would like to be able to set a custom Title to each of my indexes.
但是,我正在使用多个索引,所以我希望能够为我的每个索引设置一个自定义标题。
This is my files:这是我的文件:
Home.vue
: Home.vue
:
<ais-index :appId="angoliaAppId" :apiKey="angoliaAppKey" indexName="contacts" :query="query">
<search-results></search-results>
</ais-index>
<ais-index :appId="angoliaAppId" :apiKey="angoliaAppKey" indexName="users" :query="query">
<search-results></search-results>
</ais-index>
import SearchResults from "../search/Results";
export default {
data() {
return {
query: '',
angoliaAppId: process.env.MIX_ALGOLIA_APP_ID,
angoliaAppKey: process.env.MIX_ALGOLIA_SECRET,
};
},
components: {
SearchResults
}
};
And my component file, looks like this:我的组件文件如下所示:
../search/Results
: ../search/Results
/结果:
<template>
<ais-results class="ais-Hits__root" v-if="searchStore.query.length > 0" :data="category">
<template slot-scope="{ result }">
<div>
<ais-highlight :result="result" attribute-name="name"></ais-highlight>
</div>
</template>
</ais-results>
</template>
import SearchResults from "../search/Results";
import {
Component
} from "vue-instantsearch";
export default {
mixins: [Component]
};
Now, as said, I would very much like to be able to set a custom title name to each of my <search-results>
components, like this:现在,如前所述,我非常希望能够为我的每个
<search-results>
组件设置自定义标题名称,如下所示:
<search-results :title="My Contacts"></search-results>
Which would then for example add this in the component file:然后例如将其添加到组件文件中:
<h1>{{ title }}</h1>
Seems like you'll have to use props好像你必须使用道具
https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.