как включить внешний скрипт Vue в Vue.js

#vue.js #vuejs2 #vue-component

#vue.js #vuejs2 #vue-компонент

Вопрос:

я новичок в Vue.js и у меня есть вопрос. Я ввел скрипт (методы) Vue, который я хочу использовать в других компонентах моего приложения. поэтому я поместил этот код в компонент между тегами tow script, но я не знаю, как использовать функции этого скрипта Vue в моем приложении Vue.

Есть идеи, как это сделать?

Спасибо

 <script>
import axios from 'axios';
  export default {
    components:{
      'axios':axios
    },
    data:function(){
      return{
        info:" ",
        table:"",
        table_list:[]
      }

    },
    methods:{
      FetchData:function(table){
        axios
        .get('http://localhost/cgi-      bin/pbf functions generator/PBF Functions Generator API2.pl?table=' table)
        .then(response => (this.info = response.data))
        .catch(error => console.log(error))
      },
      tableList:function(){
        axios
        .get('http://localhost/cgi-bin/pbf functions generator/PBF Functions Generator API2.pl?type=list')
        .then(response => {return this.table_list = response.data})
        .catch(error => console.log(error))
      }

    },
    mounted(){
      this.tableList();
    }
  }

</script>  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>  

Ответ №1:

Вы могли бы использовать Vue mixins, в котором вы можете определить свои методы в файле mixin. Этот микс будет смешан с методами компонентов.

Файл: mixins.js

 var baseMixin = {
    methods: {
        getData: function (target) {
            axios.get('url' table)
            .then(response => (this.info = response.data))
            .catch(error => console.log(error))
        }
    }
};
  

Файл: somecomponent.js

 Vue.component('some-component', {
    props: ['users', 'roles'],
    mixins: [baseMixin],
    methods: {
        someMethod: function(){
            this.getData
        }
    }
});
  

Также документация Vue очень хорошо объясняет это здесь