如何在Vue中创建组件时实现功能?

时间:2016-12-09 16:49:40

标签: javascript vue.js vuex

根据docs,Vue对象的构造函数就像这样管理。

var vm = new Vue({
  created: function () { console.log("I'm created!"); }
});

但是,在创建Vue组件时,我无法弄清楚如何执行相应的操作。我已尝试过以下操作但未向控制台打印任何内容。

export default {
  created: function() { console.log("Component created!"); }
}

是否可以订阅/收听正在呈现的组件?我想通过下载一些数据并将其放入商店来对该事件作出反应,以便组件携带的表格将显示其信息。

2 个答案:

答案 0 :(得分:4)

在我的应用程序中,我倾向于使用mounted挂钩在组件安装后加载一些Ajax数据。

我的应用中的示例代码:

Vue.component('book-class', {
    template: '#booking-template',
    props: ['teacherid'],
    data: function () {
        return{
            // few data items returned here..
            message: ''
        }
    },
    methods: {
        // Few methods here..
    },
    computed: {
      // few computed methods here...
    },
    mounted: function () {


        var that = this;
        $.ajax({
            type: 'GET',
            url: '/classinfo/' + this.teacherid,
            success: function (data) {
                console.log(JSON.stringify(data));

            }
        })
    }
});


new Vue({
    el: '#mainapp',
    data: {
        message: 'some message here..'
    }
});

但是,我也可以使用created()钩子以及它在生命周期中。

在Vue2中,您有以下生命周期钩子:

enter image description here

答案 1 :(得分:1)

组件没有像应用程序那样的生命周期挂钩。但是它们有类似的东西。解决了我的问题: https://vuejs.org/v2/api/#updated