Запуск событий из компонента svelte и прослушивание его со страницы содержания - PullRequest
Новая
       8

Запуск событий из компонента svelte и прослушивание его со страницы содержания

0 голосов
/ 28 ноября 2018

У меня есть этот код в моем компоненте, который по сути совпадает с примером в svelte docs : 

export default {
  methods: {
    assessmentMouseover(e) {
      const event = new CustomEvent('assessment-mouseover', {
        detail: 'something',
        bubbles: true,
        cancelable: true,
        composed: true, // makes the event jump shadow DOM boundary
      })
      this.dispatchEvent(event)
    },
  },
  ...
}

У меня есть этот код в теге script HTMLстраница, которая создает экземпляр этого компонента, который также по сути совпадает с svelte docs: 

const el = document.querySelector('#radar')
el.addEventListener('assessment-mouseover', event => {
  console.log('got here')
})

Однако, когда я запускаю событие, я получаю эту ошибку: this.dispatchEvent is not a function.

I 'мы попробовали несколько вариантов this.dispatchEvent(), например, просто dispatchEvent(), который не вызывает ошибок, но и не вызывает слушателя;и window.dispatchEvent(), который также не срабатывает.

Что я делаю не так?

1 Ответ

0 голосов
/ 28 ноября 2018

Рабочий случай repl: https://svelte.technology/repl?version=2.15.3&gist=7b0b820ce452cf6d5d10ebf456627651

Test.html: 

<button id="{id}" on:mouseover="doMouseOver(event)">
    {isOver}
</button>

<script>
    export default {
        data() {
            return {
                isOver: 'Over Me!'
            }
        },

        methods: {
            doMouseOver(e) {
                const event = new CustomEvent('assessment-mouseover', {
                    detail: Math.random(),
                    bubbles: true,
                    cancelable: true,
                    composed: true, // makes the event jump shadow DOM boundary
                })

                //this.dispatchEvent(event)

                let source = e.target || e.srcElement
                source.dispatchEvent(event)
            }
        }
    }
</script>

App.html: 

<h1>From Test: {text}</h1>

<Test id="radar"/>


<script>
    export default {
        components: {
            Test: './Test.html'
        },

        data() {
            return {
                text: 'Wait for over'
            }
        },

        oncreate() {
            const el = document.querySelector('#radar')
            el.addEventListener('assessment-mouseover', event => {
                this.set({text: event.detail})
            })
        },
    }
</script>
...