Как загрузить локальный файл JavaScript только внутри определенных компонентов - PullRequest
Новая
       11

Как загрузить локальный файл JavaScript только внутри определенных компонентов

0 голосов
/ 29 мая 2019

У меня есть файл JavaScript, который я хочу включить только в один компонент после монтирования. Например, этот файл JavaScript (называемый dashboard.js) должен запускаться только тогда, когда компонент Dashboard.vue активен и смонтирован.

Я попытался вставить код в mount (), но это не сработает, потому что код опирается на this, являющееся окном, а не экземпляром Vue. Я также попытался добавить скрипт в document.head в смонтированной функции, но это кажется большим взломом, и я знаю, что должен быть лучший способ сделать это. 

//Dashboard.vue
<template>
<div>
Dashboard content here
</div>
</template>
<script>
export default {
    mounted() {
      //code that relies on this being the window object here (jQuery stuff)
    }
}
</script>


//dashboard.js
$(function() {
  $div = $('div');
  $div.on('click', function() {
    //do stuff
  });
});

Я бы хотел, чтобы этот локальный скрипт dashboard.js загружался и вызывался только при монтировании моего компонента.

1 Ответ

0 голосов
/ 29 мая 2019

вы можете импортировать этот скрипт в компонент: 

// Dashboard.vue
import * as dashboard from "./dashboard";

, а затем импортировать jQuery внутри dashboard.js 

// dashboard.js
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;

$(function() {
  var $div = $("div");
  $div.on("click", function() {
    //do stuff
    alert();
  });
});
...