editor多个@onCreated="onCreated"怎么赋值:editor
时间: 2023-07-03 08:16:18 浏览: 46
当生成多个 editor 时,你可以使用 `$refs` 来访问每个 editor 组件实例的方法和属性。每个组件的 `ref` 属性应该是唯一的,以便可以通过 `$refs` 对象来访问它。在你的例子中,你可以使用 `ref` 属性来引用每个 editor 组件的实例,如下所示:
```
<div v-for="item in items" :key="item.id">
<Toolbar
:editor="$refs['editor'+item.id]"
:defaultConfig="toolbarConfig"
:mode="mode"
:ref="'toolbar'+item.id"
/>
<Editor
style="height:200px;overflow-y:hidden;"
v-model="item.remark"
:defaultConfig="editorConfig"
:mode="mode"
@onCreated="onEditorCreated(item.id)"
@onChange="onChange"
:ref="'editor'+item.id"
/>
</div>
```
在这里,我们通过 `:ref` 属性为每个 editor 组件设置一个唯一的引用。然后,在 `@onCreated` 事件中,我们调用一个名为 `onEditorCreated` 的方法,该方法接受一个参数 `id`,这个 `id` 就是当前 editor 组件的 `id`。在这个方法中,我们可以使用 `$refs` 来访问当前 editor 组件的实例,如下所示:
```
methods: {
onEditorCreated(id) {
const editor = this.$refs['editor'+id];
// 现在可以使用 editor 对象来访问 editor 组件实例的方法和属性了
// 例如:editor.setContent('Hello, world!');
},
onChange() {
// ...
}
}
```
注意,在 `onCreated` 事件中,我们使用了 `item.id` 作为 `ref` 属性的一部分来确保每个组件的引用是唯一的。在 `onEditorCreated` 方法中,我们使用了相同的方式来访问每个组件的引用。