Vuejs2 数据与多次使用的同一组件共享

我有以下组成部分：

//包装器组件
{{label}}
从“Vue”导入Vue
从“./builder helper”导入BuilderHelper
从“../tiny wrapper”导入TinyWrapper
导出默认Vue.extend({
道具：[
"pk",，
“头衔”，
“现场钥匙”，
“字段”，
“数据库名”，
“必需”，
"残疾人士",，
“选项”，
“标签”，
“区域设置”，
"隐藏",，
],
mixins:[BuilderHelper]，
组成部分：{
“小包装”：TinyWrapper，
},
计算：{
编辑设置（）{
返回{
//编辑器\选择器：'.builderEditor'，
选择器：'#'+this.id，
菜单栏：“”，
工具栏：“粗体斜体|链接”，
身高：150，
上下文菜单：“粗体斜体链接”，
强制根块：false，
无效的_元素：“脚本”，
状态栏：false，
调整大小：false，
浏览器拼写检查：true，
}
}
},
})

及

//子组件
从“Vue”导入Vue
导入“tinymce/tinymce”
导出默认Vue.extend({
道具：{
初始化：{
类型：对象，
},
身份证：{
类型：字符串，
要求：正确，
},
类列表：{
类型：字符串，
},
价值：{
类型：字符串，
}
},
数据：函数（）{
返回{
内容：“”，
tinyOptions:{}，
}
},
安装的（）{
//this.content=this.value
this.tinyOptions=Object.assign（window.tinyMCESettings{
选择器：'#'+this.id，
init_实例_回调：this.initInstanceCallback，
}，this.init）
tinymce.init（this.tinyOptions）
},
方法：{
initInstanceCallback（编辑器）{
editor.setContent（this.value）
编辑器.on（'change'，e=>{
更新（编辑器）
})
编辑器.on（'keyup'，e=>{
更新（编辑器）
})
此.$parent.on（'reset'，（）=>editor.setContent（''）
},
更新（编辑）{
this.content=editor.getContent（）
this.$emit（'input'，this.content）
},
}
})

我在文档中使用了10次包装器组件

---

子组件中的数据对于每个包装器组件都是相同的，状态由最后实例化的子组件中的数据共享/覆盖。我做错了什么？

我无法从这个问题上判断这是否是你所面临的问题，但这是一个问题

当您首次在

数据

函数中创建

tinyOptions

时，您正在为其分配一个新的空对象。那很好。组件的每个实例都将为该属性拥有自己的、不同的对象。没有被分享

然而，接下来我们要做的是：

this.tinyOptions=Object.assign（window.tinymcessettings{
选择器：'#'+this.id，
init_实例_回调：this.initInstanceCallback，
}，this.init）

这将为

tinyOptions

属性指定一个不同的对象，因此原始的空对象将被丢弃。这本身不是问题。但是让我们考虑一下这里发生了什么。上述代码大致相当于以下代码：

window.tinyMCESettings.selector='#'+this.id
window.tinyMCESettings.init_instance_callback=this.initInstanceCallback，
for（此.init中的常量属性）{
window.tinyMCESettings[prop]=this.init[prop]
}
this.tinyOptions=window.tinyMCESettings

因此，它所做的是更新对象

window.tinyMCESettings

的属性，然后将该对象分配给

tinyooptions

属性

您的所有组件都将抓取相同的

window.tinyMCESettings

对象并更改其属性。虽然每个组件都有自己独特的

tinyOptions

属性，但所有这些属性最终都指向同一个对象

一种解决方案是将所有内容复制到一个新的空对象：

this.tinyOptions=Object.assign（{}，window.tinyMCESettings{
选择器：'#'+this.id，
init_实例_回调：this.initInstanceCallback，
}，this.init）

就我个人而言，我会使用

…

语法：

this.tinyOptions={
…窗口。tinyMCESettings，
选择器：'#'+this.id，
init_实例_回调：this.initInstanceCallback，
…这个.init
}

选择权在你

---

需要注意的关键是

window.tinyMCESettings

的属性现在被复制到一个新对象，而不仅仅是直接使用该对象。

不完全清楚“状态为共享/覆盖”是什么意思。你能更明确地说明哪些部分似乎是共享的，哪些观察结果会引导你得出这个结论吗？从代码中跳出来的第一件事是从

this.tinyOptions=Object.assign

开始的位。这将在所有实例之间共享相同的

tinyOptions

对象。它们都将是对象

窗口。tinyMCESettings

，尽管对

对象的调用会不断更新该对象。分配

这个。tinyOptions

应该是每个组件的本地选项，不是吗？考虑到它在

数据

-属性中？在tinyOptions中，有一个名为