小编Bou*_*him的帖子

我试图了解如何/是否可以在 Vue.js v3 中定义某种插槽继承。我有一个Container定义 2 个插槽的类：title和items。我Container在我的班级中进行扩展，并在那里Grid定义了插槽。items当我去使用我的Grid课程时，我想定义插槽title。 小提琴供参考。

容器.vue

<template>
  <div>
    <header v-if="showTitle">
      <slot name="title" />
    </header>

    <main v-if="showItems">
      <slot name="items" />
    </main>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "MyContainer",
  computed: {
    showTitle() {
      return !!this.$slots.title;
    },
    showItems() {
      return !!this.$slots.items;
    },
  },
});
</script>

Grid.vue

<template>
  <MyContainer>
    <template #items>
      <span>Here are my items</span>
    </template>
  </MyContainer> …

我最近Vue.js在 Twitter 上看到了 Evan You 的这个片段，我不明白initscript 标签中的属性是做什么的。我在 MDN 或类似网站上找不到任何关于此的信息。

该defer属性是明确的给我。

<script src="https://unpkg.com/petite-vue" defer init></script>

<!-- anywhere on the page -->
<div v-scope="{ count: 0 }">
  {{ count }}
  <button @click="count++">inc</button>
</div>

我是 vue 初学者，想请教一个问题！\n我的英语不好，但我尝试完整地描述我的问题，谢谢。

目前我用来vue学习如何访问API，但我希望能够每3秒自动再次触摸API来更新屏幕，但我真的不\xe2\x80\x99不知道如何实现这一点？

希望得到您的帮助，再次感谢您观看我的问题。

我的例子

我怎样才能在这个 vue 组件中定位带有类的元素test：

<template>
  <div id="test" class="test">

  </div>
</template>


<script setup>

console.log(document.querySelector('.test'))
</script>

该组件被导入到另一个组件中。控制台输出null.

最近学习了vuejs，似乎在完全掌握ref和reactive的使用本质区别上遇到了问题。什么时候适合使用 ref 或reactive？

我有一个组件列表，我想从外部为它们设置一个配置，

例如：

 const myConfig = [
  {
    name: 'example',
    renderer: () => (<button @click="clickHanlder">Click me!</button>)
  },
  ...
 ];

对于我的组件，我想使用myConfig如下所示：

  <template>
    <div class="example">
      <template v-for="(item, index) in myConfig" :key="index">
        My Button:
        <div class="example-2">{{ item.renderer() }}</div>
      </template>
    </div>
  </template>

请注意，我不想使用slots

我怎样才能做到呢？

我在watch和vue router的文档中有几乎相同的示例用于组合 API。但console.log即使route.params.gameId在模板中正确显示，也永远不会被触发

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const route = useRoute()

watch(
      () => route.params.gameId,
      async newId => {
        console.log("watch"+newId)
      }
    )
</script>

<template>
    <div>
        {{route.params.gameId}}
    </div>
</template>

我究竟做错了什么？我还尝试使 watch 函数成为非异步的，但它没有改变任何东西，稍后我将需要它来获取 api，所以它应该是异步的。

大家好，我想在单击按钮时复制输入值是的，但没有任何效果。请帮忙！！

<script>
  function copyToClipboard(element) {
    var $temp = $("<input>");
    $("body").append($temp);
    $temp.val($(element).text()).select();
    document.execCommand("copy");
    $temp.remove();
  }
</script>   

<input type="text" class="form-control" name="myvalue"  id="myvalue" value="YEAH" readonly  />

<button class="btn btn-primary btn-block" onclick="copyToClipboard('#myvalue')">Copy myvalue</button>

我需要使用axios发送发帖请求，以便使用Filepond Uploader上传文件。

我该怎么做？

我正在使用如下所示的自定义流程处理程序，但无法正常工作。

processHandler: (fieldName, file, metadata, load, error, progress, abort) => {
        let formData = new FormData();
        let uploadPercentage = 0;
        formData.append('file', file);
        console.log(formData);

        HTTP.post('v1/upload', formData,
          {
            headers: {
              'Content-Type': 'multipart/form-data'
            },
            onUploadProgress: function (progressEvent) {
              uploadPercentage = parseInt(Math.round((progressEvent.loaded * 100) / progressEvent.total));
              console.log(uploadPercentage);
            }.bind(this)
          })
          .then((response) => {
            console.log(response);
            // Should call the load method when done and pass the returned server file id
            // the load method accepts either a string (id) or an object
            // …

我vue.js在我的 webapp 中构建了一个带有2.0的搜索组件。我现在遇到的问题是它搜索每个类型事件。所以假设我想搜索samsung. 它向我的服务器发出 7 个请求（7 个字母）。

我的输入字段如下所示：

<input
        class="input pr-4 pl-10 block"
        type="text"
        placeholder="Search for anything..."
        v-model="search"
        @keydown.enter="isOpen = false"
        @keydown.esc="isOpen = false"
        @input="onChange"/>

我如何确保它只在输入单词时进行搜索（因此它向我的服务器发出 1 个请求）