我未能在 vue-froala-wysiwyg 事件中调用组件的方法

Question

在laravel 8/2.6/bootstrap 4.6/Axios应用程序使用vue-froala-wysiwyg我需要得到输入的文本和内容用输入的文本调用组件的方法。我在这里定义事件https://github.com/froala/vue-froala-wysiwyg:

import VueFroala from 'vue-froala-wysiwyg' // https://froala.com/wysiwyg-editor/docs
Vue.use(VueFroala) // https://github.com/froala/vue-froala-wysiwyg
Vue.config.productionTip = false
// let self = this
export default {
name: "RoomChat",
components: {},
data() {
return {
currentRoom: null,
...
froalaEditorConfig: {
events: {
initialized: function () {
console.log('froalaEditorConfig initialized')
},
'contentChanged': function () {    // https://froala.com/wysiwyg-editor/docs/events/
console.log('froalaEditorConfig contentChanged this::')
// this - is reference to froala component
console.log(this);
console.log('this.el::')
// I tryied to get ref to root component in several ways
console.log(this.el)  // undefined
console.log('this.el.$parent::')
console.log(this.el.$parent)  // undefined
console.log('this.$parent::')
console.log(this.$parent)  // undefined
console.log('froalaEditorConfig contentChanged this.html.get()::')
console.log(this.html.get());
parent.actionUser(this.html.get()) // I got parent.actionUser is not a function error
}, 
},
},

...

methods: {
actionUser(enteredText) {
...

哪种方式是有效的?

补充道:寻找决定，我找到了https://medium.com/dataseries/vue-js-components-parent-child-and-root-f1fcbe422feb这篇文章。$root被描述但在我的事件中生成:

console.log('this.$root::')
console.log(this.$root)

输出Undefined

我看到的事件输出如下:https://prnt.sc/1r6pp4y和https://prnt.sc/1r6ptoh

谢谢!

Answer 1

我发现决定发送vueComponent实例作为参数:

data:(vm) => ({
...
froalaEditorConfig: {
events: {
initialized: function () {
},
contentChanged () {
vm.actionUser(this.html.get()) // That works ok
}, 
},
....
},
}), // data(vm) => ({