我有这些文件
App.vue、Header.vue、search.js 和 Search.vue
App.vue
是正常的,只是添加了不同的 View
Header.vue
有一个输入框
<input type="text" v-model="searchPin" @keyup="searchResults" />
<div>{{searchPin}}</div>
和脚本:
import useSearch from "@/compositions/search";
export default {
name: "Header",
setup() {
const { searchPin, searchResults } = useSearch();
return {
searchPin,
searchResults
};
}
};
search.js
具有可重用的代码
import { ref } from "vue";
export default function useSearch() {
const searchPin = ref("");
function searchResults() {
return searchPin.value;
}
return {
searchPin,
searchResults
};
}
现在,这很好用..一旦你在输入框上添加了一些东西,它就会显示在下面的 div 中。
我不明白的是如何将此代码用于第三方组件,如 Search.vue。
我有这个,但它不起作用。
<template>
<div>
<h1 class="mt-3">Search</h1>
<div>{{ searchPin }}</div>
</div>
</template>
<script>
import useSearch from "@/compositions/search";
export default {
name: "Search",
setup() {
const { searchPin, searchResults } = useSearch();
return {
searchPin,
searchResults
};
}
};
</script>
我错过了什么?谢谢。
最佳答案
解决这个问题很简单
代替
import { ref } from "vue";
export default function useSearch() {
const searchPin = ref("");
function searchResults() {
return searchPin.value;
}
return {
searchPin,
searchResults
};
}
使用
import { ref } from "vue";
const searchPin = ref("");
export default function useSearch() {
function searchResults() {
return searchPin.value;
}
return {
searchPin,
searchResults
};
}
问题是 searchPin
的作用域是函数,所以每次调用函数时,它都会得到一个新的 ref
。在某些情况下这是一个理想的效果,但在您的情况下,您需要将其移除。
这是一个同时使用两者的示例,希望它能解决问题。
const {
defineComponent,
createApp,
ref
} = Vue
const searchPin = ref("");
function useSearch() {
const searchPinLoc = ref("");
function searchResults() {
return searchPin.value + "|" + searchPinLoc.value;
}
return {
searchPin,
searchPinLoc,
searchResults
};
}
const HeaderComponent = defineComponent({
template: document.getElementById("Header").innerHTML,
setup() {
return useSearch();
},
})
const SearchComponent = defineComponent({
template: document.getElementById("Search").innerHTML,
setup() {
return useSearch();
}
})
createApp({
el: '#app',
components: {
HeaderComponent, SearchComponent
},
setup() {}
}).mount('#app')
<script src="https://unpkg.com/vue@3.0.0-rc.9/dist/vue.global.js"></script>
<div id="app">
<header-component></header-component>
<search-component></search-component>
</div>
<template id="Header">
searchPin : <input type="text" v-model="searchPin" @keyup="searchResults" />
searchPinLoc : <input type="text" v-model="searchPinLoc" @keyup="searchResults" />
<div>both: {{searchResults()}}</div>
</template>
<template id="Search">
<div>
<h1 class="mt-3">Search</h1>
<div>both: {{searchResults()}}</div>
</div>
</template>
关于vue.js - Vue 3 Composition API 在多个组件中重用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63681970/