首页 > 关于vue 动态组件应用场景的疑问

关于vue 动态组件应用场景的疑问

  1. 使用vue.js动态组件实现tab切换,发现子组件绑定的props在切换后并不能立即展现在子组件中,需要来回切换两次才能出现在子组件中,不知道是不是不该这么用。

  2. 动态组件如果需要获取实例或者父组件的data,那么势必将动态props绑定到自定义标签上,这里使用了保留的component,将属性绑定到了上面,但是这样会导致在没有定义该属性的currentView上面出现items="[objectObject],[object Object],[object Object]"

是不是不该这么用?

<div id="app">
    <a href="javascript:" @click="this.currentView = 'sss'">sss</a>
    <a href="javascript:" @click="this.currentView = 'rrr'">rrr</a>
    <component :is="currentView" :items="items" keep-alive></component>
</div>
var sss = Vue.component('sss', {
        template: '<p>232232</p>'
    });
    var rrr = Vue.component('rrr', {
        template: '<div><ul><li v-for="item in items">{{item.img}} {{item.price}}</li></ul></div>',
        props:['items'],
        activate: function () {
          console.log(this.items);
        }
    });
    var vm = new Vue({
        el: "#app",
        data: {
            currentView: 'sss',
            items: []
        },
        created: function () {
            var self = this;
            $.get(someApi, function (data) {
                if (data.code === 200) {
                    self.items = data.data.list;
                } else {
                    alert('error!');
                }
            }, 'json');
        },
        components: {
            sss: sss,
            rrr: rrr
        }
    });

已经在gitter上解决了,请求放到子组件上,另外在activate钩子下面需要调用done()才能同步数据,这个的确很容易让人忽略。

Vue.component('activate-example', {
  activate: function (done) {
    var self = this
    loadDataAsync(function (data) {
      self.someData = data
      done()
    })
  }
})

第二个问题,既然 sss 组件不需要items,那就把获取 items 的逻辑写到 rrr 里面好了。如果还有别的组件依赖这笔数据,或许可以在 sss 组件里设置这个 props, 但是不用它。

【热门文章】
【热门文章】