在加载 vue.js 时运行组件方法

Posted 2023-02-22

【中文标题】在加载 vue.js 时运行组件方法

【英文标题】：Run component method on load vue.js

【发布时间】：2017-04-02 06:18:51

【问题描述】：

嘿，我是 Vue.js 的新手，我正在尝试完成看似简单的事情，但我遇到了麻烦。本质上，我需要它，因此每次将组件加载到 DOM 中时，其中一个方法就会触发。这是我当前的代码，我尝试使用 v-on:load 但它似乎不起作用。

Vue.component('graph', 
    props:['graphId','graphData'],
    template: '<canvas v-on:load="populateGraph()"></canvas>',
    methods: 
        initGraph: function () 
            var settlementBalanceBarChart = new Chart(this.graphId, 
                type: "bar",
                data: settlementBalanceBarData,
                options: settlementBalanceBarOptions
            );
        ,
        //this is the function I would like to run
        populateGraph: function () 
            alert('graphId');
        
    

);

var vm = new Vue(
    el: "#app",
    mounted: function()

    

);

如果我使用 v-on:click 事件，相同的代码可以正常工作

【参考方案1】：

您必须调用以“this”为前缀的函数，如下所示：

var data =

   cashiers: []


var vm = new Vue(
    el: '#app',
    data: data,
    created: function () 
       this.getCashiers();
    ,
    methods: 
         getCashiers: function () 
          vm.cashiers = [];
         
    

);

【讨论】：

您为什么在方法声明中而不是在创建的声明中编写getCashiers 函数？

"methods declarations" 是编写方法的正确位置。 “created declarations”是组件创建完成后可以调用方法的地方。

@kaleidawave 尽管在这种情况下它可能看起来没用，但在方法中创建它是一种很好的做法，例如当您需要在创建和其他事件上调用相同的方法时很有用。

【参考方案2】：

您可以使用instance lifecycle hooks。例如：

Vue.component('graph', 
    props:['graphId','graphData'],
    template: '<canvas></canvas>',
    created: function () 
        alert('graphId');
    ,
    methods: 
);

【讨论】：

渲染完成后created()会运行一次吗？