vue export default 外部调用内部methods

Question

<script>
    //在想这里调用 methods 里面的方法 因为这个不能写到里面
    $(document).on('refresh', '.pull-to-refresh-content', function (e) {
        this.getList();// 想在这里地调用里面的 getList  但是报错
        console.log('123');
    });
    
    export default {
        name: "friends",
        data() {
            return {
                articles: []
            }
        },
        methods: {
            getList: function () {
                
            }
        },
    }
</script>

Answer 1

你可以这样写

<script>
    //在想这里调用 methods 里面的方法 因为这个不能写到里面
    $(document).on('refresh', '.pull-to-refresh-content', function (e) {
        friends.methods.getList();// 想在这里地调用里面的 getList  但是报错
        console.log('123');
    });
    
    const friends = {
        name: "friends",
        data() {
            return {
                articles: []
            }
        },
        methods: {
            getList: function () {
                
            }
        },
    }
    export default friends;
</script>

Answer 2

你可以把getlist卸载export default 外面 以一种纯函数的方式去写

function getList (pagesize,pages){
  return this.$axios.get('xxx') .....
}

然后在methods中

methods: {
getListInExpDau(){
 getList(10,1) ....
}

Answer 3

这种方法也许可以

<script>
    //在想这里调用 methods 里面的方法 因为这个不能写到里面
    $(document).on('refresh', '.pull-to-refresh-content', function (e) {
        vm && vm.getList();// 想在这里地调用里面的 getList  但是报错
        console.log('123');
    });
    
    var vm = null;
    
    export default {
        name: "friends",
        data() {
            return {
                articles: []
            }
        },
        created: function() {
            vm = this
        },
        methods: {
            getList: function () {
                
            }
        },
    }
</script>

Answer 4

如果有多个组件实例，你要调哪个实例的method？
如果组件销毁后，触发事件，调用已销毁实例的method会怎么样你考虑过吗？

请你老老实实在mounted里写这些代码

Answer 5

这个可以写在里面把

export default {
        name: "friends",
        data() {
            return {
                articles: []
            }
        },
        mounted() {
            $(document).on('refresh', '.pull-to-refresh-content', () => {
                this.getList();
                console.log('123');
            });
        },
        destroyed() {
            $(document).off('refresh', '.pull-to-refresh-content');
        },
        methods: {
            getList: function () {
                
            }
        },
    }