我在 TS 中使用 Vue3（最后一个 vue-cli）。
我想在 vue-loader 编译 .vue 文件时获取所有节点（vnodes）元素。我需要读取节点属性并删除所有“数据测试”。
我尝试在 vue.config.js 中使用：
module.exports = {
chainWebpack: (config) => {
config.module
.rule('vue')
.use('vue-loader')
// .loader('vue-loader') // same with
.tap((options) => {
options.compilerOptions = {
...(options.compilerOptions || {}),
modules: [ // never enter here
{
preTransformNode(node) {
// if (process.env.NODE_ENV === 'production') {
const { attrsMap, attrsList } = node
console.log(node)
if (attrsMap['qa-id']) {
delete attrsMap['qa-id']
const index = attrsList.findIndex(
(x) => x.name === 'data-test'
)
attrsList.splice(index, 1)
}
// } …晚上好，
我的问题是：我有一个显示简单 div 的循环。我有一个方法可以指定我的 div 的尺寸（在我的情况下是必需的）。但是，当我通过更改 div 的大小再次调用该方法时，它不起作用，因为没有重新渲染。
为了克服这个问题，我在 my: v-for 的键上生成了一个 guid，其中包含一个变量，例如：
<div v-for="task in tasks" :key="task.id + guid()">...blabla...</div>
是否可以在循环期间直接生成此代码以避免串联？
<div v-for="(task, maVar=guid()) in tasks" :key="maVar">...blabla...</div>
PS：guid()方法的代码：
guid() {
return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16))
}
谢谢
我需要$emit来自自定义指令的事件。可能吗？
指令.js：
vnode.context.$emit("myEvent") // nothing append
vnode.child.$emit("myEvent") // error
vnode.parent.$emit("myEvent") // error
component.vue：
<div v-directive.modifier="binding" @myEvent="method()"></div>
您知道是否有可能或有任何技巧？
谢谢
我有两个组件：弹出窗口和页面。弹出窗口位于页面内，我想使用 name v-slot。
在popup.vue（单文件组件）内部，代码是：
<template>
<div>
...
<slot/> // default
...
<slot name="bottom"/> // name slot
</div>
</template>
现在在我的页面中，我导入弹出窗口并使用它，如下所示：
<template>
...
<popup v-if="...">
content of slot by default...
<template v-slot:bottom>
content text
</template>
</popup>
...
</template>
但有一个错误：
<template v-slot>只能出现在接收组件内部的根级别
我尝试使用组件绕过但没有附加任何内容。与简写相同，例如：
<template #bottom>...</template>
在文档中，除了通过动作调用的突变之外，状态是不可变的......好吧。
我在我的组件中使用 mapGetters、mapActions ...
店铺 ：
export default {
namespaced: true,
state: {
color: "violet"
},
mutations: {
changeColor(state, newColor) {
state.color = newColor
},
},
actions: {
changeColor({ commit }, newColor) {
commit('changeColor', newColor)
}
}
成分 ：
...
methods: {
...mapActions({
setColor: 'store/changeColor',
}),
myMethodCallByButton(){
this.setColor("blue").then(response => {
console.log("change Color done")
},err => {
console.log("change Color error")
})
}
...
该方法工作正常，商店已更新，除了我从未收到过 console.log ()。
文档中写道，mapActions 相当于 this.$store.dispatch。
PS：我想保留 mapGetters 地图，mapActions .. 我不喜欢调用 this.$store.dispatch
PS2：我在我的商店中使用模块
谢谢
我有 1 个主组件和 2 个子组件。在主人我做：
<keep-alive>
<component :is="getChild" @onrender="childRender" />
</keep-alive>
所以我从孩子 1 切换到孩子 2 并保持每个孩子的状态。
问题：当我们使用 keep-alive 时，子组件不会重新渲染，当我使用 onCreated 或 onMounted 或 onUpdated 时...没有任何附加，这是正常的。那么如何用 keep-alive 捕获“渲染”事件呢？
我知道我可以使用公共汽车或像 Vuex 这样的商店来保持状态......但如果可能的话我不想要它。
谢谢。