Vue.js更新到0.12.7的几个问题

2 条评论 学习笔记

　　今天试着更新了项目中的Vue.js框架，然后整个人瞬间就不好了，主要是v-with属性直接不能用了，当然这个之前是没有考虑的，不是兼容，是被放弃了。

　　比如之前的代码是这样的：

new Vue({
  el: "#SignTeacher",
    data: {
    result: {msg:"msg"},
    currentName: "history",
  },
  components: {
    history: {
      template:"<p>{{msg}}</p>",
      methods:{
        test:function(){}
      }
    }
  }
}

<div v-with="result" v-component="currentName"></div>

　　现在只能使用这种形式的代码：

new Vue({
  el: "#SignTeacher",
    data: {
    result: {msg:"msg"},
    currentName: "history",
  },
  components: {
    history: {
      template:"<p>{{msg}}</p>",
      methods:{
        test:function(){}
      },
      props:{
        msg:string
      }
    }
  }
}

<component msg="{{result.msg}}" is="currentName"></component>

　　这种方式最直接导致的问题就是无法直接将整个对象直接将所有属性绑定在组件中，这就是v-with的作用。现在没了意味着大部分代码都需要重写。

　　最开始没辙，试着重写了五六个组件，虽然不难，只是太麻烦，好几十个组件一个个改起来，中间还得期待不出错，难度太大。最后开始使用其他变通方式。

components: {
    history: {
      template:"<p>{{msg}}</p>",
      methods:{
        test:function(){}
      },
      props:{
        call:Function
      },
      data:function(){
        return {
          msg:"",
          more:""
        };
      },
      created:function(){
        this.call(this);
      }
    }
  }

　　通过使用data属性，可以直接将对象返回绑定到根对象中，就像是变相实现了之前v-with的功能，当然这个方式还是得修改所有的组件，但这个难度就低多了，只需要修改调用和初始化代码。
　　同时还使用了created属性，这个很只是为了应对之前我使用的一个只组件的查询功能直接废了的功能。估计是框架底层修改太大，所以只好使用最不愿意使用的各种回调，调来调取很难控制，毕竟前端的代码是分开的，后期还得组合起来，但没办法，再麻烦也得用。

　　花了整整一天，搞定。

2条评论在“Vue.js更新到0.12.7的几个问题”

写下你最简单的想法