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

Question

in 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 带有 this.$root 的文章描述了但在我的事件中进行：

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

输出未定义。

我在事件输出中看到的内容：https://prnt.sc/1r6pp4y and https://prnt.sc/1r6ptoh

谢谢！

Answer 1

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

    data:(vm) => ({
            ...
            froalaEditorConfig: {
                events: {
                    initialized: function () {
                    },

                    contentChanged () {
                        vm.actionUser(this.html.get()) // That works ok
                    }, 

                },
                ....
            },
   }), // data(vm) => ({

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

I failed to call component's method inside of vue-froala-wysiwyg event

javascript

froala

vuejs2