前端 - Vue 注册全局组件，怎么样在vue实例里动态绑定data

问题描述

问 题

Vue.component('my-pagination', {
        template: '<ul class="uk-pagination">' +
        '<li v-if="!has_previous" class="uk-disabled"><span><i class="uk-icon-angle-double-left"></i></span></li>' +
        '<li v-if="has_previous"><a v-attr="onclick:\'gotoPage(\' + (page_index-1) + \')\'" href="#0"><i class="uk-icon-angle-double-left"></i></a></li>' +
        '<li class="uk-active"><span v-text="page.page_index"></span></li>' +
        '<li v-if="!has_next" class="uk-disabled"><span><i class="uk-icon-angle-double-right"></i></span></li>' +
        '<li v-if="has_next"><a v-attr="onclick:\'gotoPage(\' + (page_index+1) + \')\'" href="#0"><i class="uk-icon-angle-double-right"></i></a></li>' +
        '</ul>'
    });

全局注册了组件，在vue实例里如何给组件提供data函数呢？

var vm = new Vue()

在全局定义组件的时候，肯定不确定渲染组件需要的data，只有在实例化vue的时候才有机会获取data，如果组件定义成局部的，那在其他地方调用又很麻烦~

解决方案

定义组件的时候，组件内部的逻辑就已经确定下来了，内部数据也是确定的，所以，组件内部需要的data函数应该是确定的，至于不确定的，受外部因素控制的属性，应该由props传入。

这篇关于前端 - Vue 注册全局组件，怎么样在vue实例里动态绑定data的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！