多个组件中的 Vue 3 组合 API 重用 [英] Vue 3 Composition API reuse in multiple components

问题描述

我有这些文件

App.vue、Header.vue、search.js 和 Search.vue

App.vue 正常，只是添加了不同的视图

Header.vue有输入框

<输入类型=文本"v-model=searchPin"@keyup=搜索结果"/><div>{{searchPin}}</div>

和脚本:

import useSearch from "@/compositions/search";导出默认 {名称:标题"，设置() {const { searchPin, searchResults } = useSearch();返回 {搜索针，搜索结果};}};

search.js 有可重用的代码

import { ref } from "vue";导出默认函数 useSearch() {const searchPin = ref("");功能搜索结果(){返回 searchPin.value;}返回 {搜索针，搜索结果};}

现在，它运行良好.. 在输入框中添加内容后，它会显示在下面的 div 中.

我不明白的是如何将这段代码用于像 Search.vue 这样的第三个组件.

我有这个，但它不工作.

<template>
<h1 class="mt-3">搜索</h1><div>{{ searchPin }}</div></div></模板><脚本>从@/compositions/search"导入 useSearch；导出默认 {名称:搜索"，设置() {const { searchPin, searchResults } = useSearch();返回 {搜索针，搜索结果};}};</脚本>

我错过了什么?谢谢.

解决方案

解决这个问题很简单

而不是

import { ref } from "vue";导出默认函数 useSearch() {const searchPin = ref("");功能搜索结果(){返回 searchPin.value;}返回 {搜索针，搜索结果};}

使用

import { ref } from "vue";const searchPin = ref("");导出默认函数 useSearch() {功能搜索结果(){返回 searchPin.value;}返回 {搜索针，搜索结果};}

问题是 searchPin 的作用域是函数，所以每次调用函数时，它都会得到一个新的 ref.在某些情况下，这是一种理想的效果，但在您的情况下，您需要将其取出.

这是一个同时使用两者的例子，希望它能清除它.

const {定义组件，创建应用程序，参考} = Vue常量 searchPin = ref("");函数使用搜索(){常量 searchPinLoc = ref("");功能搜索结果(){返回 searchPin.value + "|"+ searchPinLoc.值；}返回 {搜索针，搜索PinLoc，搜索结果};}常量 HeaderComponent = defineComponent({模板:document.getElementById("Header").innerHTML,设置() {返回使用搜索()；},})常量 SearchComponent = defineComponent({模板:document.getElementById("Search").innerHTML,设置() {返回使用搜索()；}})创建应用程序({埃尔:'#app'，组件: {标头组件、搜索组件},设置() {}}).mount('#app')

<script src="https://unpkg.com/vue@3.0.0-rc.9/dist/vue.global.js"></脚本><div id="app"><标题组件></标题组件><搜索组件></搜索组件></div><模板id="页眉">searchPin : <input type="text" v-model="searchPin" @keyup="searchResults"/>searchPinLoc : <input type="text" v-model="searchPinLoc" @keyup="searchResults"/><div>两者:{{searchResults()}}</div></模板><模板id="搜索">
<h1 class="mt-3">搜索</h1><div>两者:{{searchResults()}}</div></div></template>

I have these files

App.vue, Header.vue, search.js and Search.vue

App.vue is normal and just adding different views

Header.vue has an input box

<input type="text" v-model="searchPin" @keyup="searchResults" />
<div>{{searchPin}}</div>

and script:

import useSearch from "@/compositions/search";

export default {
  name: "Header",
  setup() {
    const { searchPin, searchResults } = useSearch();

    return {
      searchPin,
      searchResults
    };
  }
};

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
  };
}

Now, this is working well.. once you add something on the input box, it is showing in the div below.

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>

What am I missing? Thanks.

解决方案

The fix for this is very simple

instead of

import { ref } from "vue";

export default function useSearch() {
  const searchPin = ref("");

  function searchResults() {
    return searchPin.value;
  }

  return {
    searchPin,
    searchResults
  };
}

use

import { ref } from "vue";

const searchPin = ref("");

export default function useSearch() {  

  function searchResults() {
    return searchPin.value;
  }

  return {
    searchPin,
    searchResults
  };
}

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 组合 API 重用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！