#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 очень хорошо объясняет это здесь