vue组件中的data

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
<div id="app">
  <div>{{ning}}</div>
  <lin @lxy="addVal"></lin>
  <lin @lxy="addVal"></lin>
</div>

<script>

  var returnObj={fnn:0}

  Vue.component("lin",{
    template:"<button @click='xnn'>{{fnn}}</button>",

    //第一种,返回函数      

    data : function(){  //组件中的data必须是函数,这样组件不相互影响,这样的好处就是每个实例可以维护一份被返回对象的独立的拷贝
      return {
        fnn:0
      }
    },

    //第二种,返回对象,

    data : function(){  //data 选项是一个对象,会影响到其他实例
      return  returnObj
    },

    methods:{
      xnn:function(){
        this.fnn +=1;
        this.$emit("lxy")
      }
    }
  })
  new Vue({
    el:"#app",
    data:{
      ning:0
    },
    methods:{
      addVal:function(){
        this.ning +=1
      }
    }
  })
</script>

原文地址:https://www.cnblogs.com/onceweb/p/13560859.html