Vue 3 Composition API在多个组件中的重用 [英] Vue 3 Composition API reuse in multiple components
问题描述
我有这些文件
App.vue,Header.vue,search.js和Search.vue
App.vue, Header.vue, search.js and Search.vue
App.vue
是正常的,只是添加了不同的视图
App.vue
is normal and just adding different views
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
具有可重复使用的代码
search.js
has the reusable code
import { ref } from "vue";
export default function useSearch() {
const searchPin = ref("");
function searchResults() {
return searchPin.value;
}
return {
searchPin,
searchResults
};
}
现在,它运行良好..在输入框中添加内容后,它就会显示在下面的div中.
Now, this is working well.. once you add something on the input box, it is showing in the div below.
我不了解的是如何将此代码用于Search.vue之类的第三个组件.
The thing I have not understood is how to use this code to a third component like Search.vue.
我有这个,但是不起作用.
I have this, but its not working.
<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>
我想念什么?谢谢.
推荐答案
此问题的解决方法非常简单
The fix for this is very simple
代替
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
.在某些情况下,这是理想的效果,但是在您的情况下,您需要将其取出.
The problem is that the searchPin
is scoped to the function, so every time you call the function, it gets a new ref
. This is a desirable effect in some cases, but in your case, you'll need to take it out.
以下是同时使用这两个示例的示例,希望可以将其清除.
Here is an example that uses both, hope it clears it up.
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 3 Composition API在多个组件中的重用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!