• 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>

  • 相关阅读:
    第06组Alpha冲刺(4/6)
    第06组Alpha冲刺(3/6)
    第06组Alpha冲刺(2/6)
    第06组 Alpha冲刺 (1/6)
    08-js函数
    07-数组
    06-js分支
    05-js运算符
    04-js变量
    03-css3D转换
  • 原文地址:https://www.cnblogs.com/onceweb/p/13560859.html
Copyright © 2020-2023  润新知