在从 vue 2 迁移到 vue 3 的过程中，我收到一些编译警告。弃用$listenersin 组件就是这些警告之一。我已经检查了官方文档以$attrs通过删除$listeners. 我是 vue 3 的新手。所以，无法理解如何处理与侦听器相关的那些警告。
这是片段：
第一种情况： 组件 1
<template>
<div>
<input ref="input"
:value="txtField"
@input="txtField=$event.target.value"
:type="inputType"
:class="inputClass"
:placeholder="placeholder"
:disabled="disabled"
:readonly="readonly"
:onfocus="disabled&&'this.blur();'"
:tabindex="tabindex"
v-on="listenersInput" // here is the method where $listeners used
@keyup.enter="enterHandler"
@blur="validateOnEvent"/>
</div>
</template>
//method
listenersInput() {
//var vm = this;
return Object.assign({}, this.$listeners, {
input: function(event){ /*vm.$emit('input',event.target.value);*/}
});
},
第二种情况： 组件 2
<template>
<custom-button
v-bind="buttonProps"
v-on="$listeners"
:class="buttonClass"
@click="tooggle">
</custom-button>
</template>
这两种情况该如何处理呢？
我正在将 vue 2 应用程序迁移到 vue 3。在官方文档中，提到 $listeners 对象已在 Vue 3 中删除。事件监听器现在是 $attrs 的一部分。它也采用非 prop 属性（类、样式）。在我的 vue 2 应用程序中，有一个图标按钮自定义组件，如下所示。
图标组件：
<template>
<vu-button v-bind="buttonProps"
:class="buttonClass"
v-on="$listeners"
@click="buttonToggle">
<vu-icon v-bind="iconProps"><slot/></vu-icon>
</vu-button>
</template>
它用于各种其他组件。
父组件 1：
<vu-icon-button id="sw1" medium style="left:200px;">home</vu-icon-button>
父组件2：
<vu-icon-button class="menu-detail-btn" icon="collapse_menu" icon-type="su" @click="openModal()" size="small"></vu-icon-button>
至于迁移策略，我删除了 $listeners 但不确定那些非 prop 属性和 v-bind 标记。如何修改它们以便可以在具有属性的父组件中使用？
在我的 vue 应用程序中，我使用插槽来存储某些内容块。现在，我必须将我的应用程序迁移到 React 中。在探索 React 时，我了解到props.children 的工作方式与插槽工作方式类似。
但是，我不确定在反应中使用这种模式的正确方法是什么。
这是vue中的代码示例
<template>
<div class="badge-box">
<span :class="badgeClass" :style="badgeStyle">
<span v-if="shape !=='dot'" class="line-break">
<slot>
{{text}}
</slot>
</span>
</span>
<span v-if="shape ==='dot'" class="line-break" style="margin-left: 8px;">
<slot name="dotShape">
{{text}}
</slot>
</span>
</div>
</template>
<script>
export default {
name:'sample'
props: {
text: { type: string }
}
}
</script>
如何使用 props.children 将这个 vue slot 模式更改为 React？
在我的应用程序中，我正在努力存储用户表单响应。我创建了 pinia 商店并创建了每个表单对象。使用这个存储到我的组件中并将该存储的 getter 函数传递到变量中，
我将这个变量用作 v 模型。给出输入后也不会返回任何内容。我也没有收到任何错误。我是否遵循了任何错误的方法？
用户存储.js
import { defineStore } from 'pinia';
export const userResponses = {
formsResponses: {
form1: {
input1: '',
},
},
};
export default defineStore('userStore', {
state() { return userResponses; },
getters: {
getFormsInput: (state) => state.formsResponses.form1,
},
actions: {
setFormsResponses(formResponses) {
this.formsResponses.form1 = formResponses;
},
},
});
Form1.vue
<template>
<input type="text" name="input_form" v-model="input"/>
<button type="Primary" @click="submit">submit</button>
</template>
<script setup>
import { computed, ref } from 'vue';
import useUserStore from '@/store/userStore';
const userStore …我想设置一个规则，它将替换从其他路径导入任何文件时使用 (../../js/fileName.js) 这种样式的依赖关系。
我们需要强制执行一条规则，这样无论我们在哪里放置“../../path”，它都会给出一个 linting 错误，将其更改为“@/path/”，如下所示。
以前有人处理过这个问题吗？任何建议都会有帮助。
我有一个像下面这样的对象数组。
[
{
product_id: 4,
product_name: "Samsung",
category_name: "Tv and home appliance",
is_Available: 1
},
{
product_id: 8,
product_name: "Apple",
category_name: "Home gadgets",
is_Available: 1
},
{
product_id: 9,
product_name: "Verifone",
category_name: "Electronics",
is_Available: 0
}
]
我想根据is_Available标志值将该数组分成两个。所以我确实喜欢使用reduce。
const formmattedResponse = data.reduce((arr,el) => {
if(el.is_Available === 1) {
arr.push({...el});
}
return arr;
},[]);
但是，我需要基于上面的数据数组的这种类型的格式化数据，如下所示
{
availableData: [{
product_id: 4,
product_name: "Samsung",
category_name: "Tv and home appliance",
is_Available: 1
},
{
product_id: 8,
product_name: "Apple",
category_name: "Home gadgets",
is_Available: 1 …