Javascript Vue JS-使用$emit将父组件中的值增加1的问题

我正在学习Vue JS中的$emit，我决定在子组件中创建一个名为

counter

的值，然后在单击按钮时递增1，但我决定使用$emit在父组件中写入所有逻辑

但每次我单击按钮时，该值都不会增加，尽管该方法有效

生命周期.vue

<template>
    <div>
        <p>{{counter}}</p>
        <button @click="add">Click me</button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },

  methods: {
      add() {
        this.$emit('updated', this.counter)
      }
  },
};
</script>

<template>
  <div>
      <LifeCycles @updated="usefulMethod" />
  </div>
</template>

<script>
import LifeCycles from "./LifeCycles.vue";
export default {
  components: {
    LifeCycles,
  },

  methods: {
     usefulMethod: function(counter) {
        console.log(counter++)
     }
  }
};
</script>

{{counter}}

点击我
导出默认值{
数据（）{
返回{
柜台:0,，
};
},
方法：{
添加（）{
此.$emit（'updated'，this.counter）
}
},
};

HeadlineLifeCycle.vue

<template>
    <div>
        <p>{{counter}}</p>
        <button @click="add">Click me</button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },

  methods: {
      add() {
        this.$emit('updated', this.counter)
      }
  },
};
</script>

<template>
  <div>
      <LifeCycles @updated="usefulMethod" />
  </div>
</template>

<script>
import LifeCycles from "./LifeCycles.vue";
export default {
  components: {
    LifeCycles,
  },

  methods: {
     usefulMethod: function(counter) {
        console.log(counter++)
     }
  }
};
</script>

从“/LifeCycles.vue”导入生命周期；
导出默认值{
组成部分：{
生命周期，
},
方法：{
有用方法：函数（计数器）{
console.log（计数器++）
}
}
};

这是因为您没有增加子组件中的

计数，该子组件位于其
数据中：


const lifecycles=Vue.component（'lifecycles'）{
模板：“#生命周期”，
data（）{return{counter:0}}，
方法：{
add（）{this.$emit（'updated'，++this.counter）；}//fix
}
});
新Vue({
el:#headlinelifecycle“，
组件：{lifecycles}，
方法：{
usefulMethod:函数（计数器）{console.log（计数器）；}
}
});

{{counter}}

点击我
线路

this.$emit('updated', this.counter)

没有发出
此.counter
引用，因此每当您单击按钮时，实际上是在发出计数器初始值，即
0
。
因此，如果确实需要在父组件中执行所有逻辑，则必须在父组件中定义
计数器
变量：

生命周期.vue

<template>
    <div>
        <p>{{counter}}</p>
        <button @click="add">Click me</button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },

  methods: {
      add() {
        this.$emit('updated', this.counter)
      }
  },
};
</script>

<template>
  <div>
      <LifeCycles @updated="usefulMethod" />
  </div>
</template>

<script>
import LifeCycles from "./LifeCycles.vue";
export default {
  components: {
    LifeCycles,
  },

  methods: {
     usefulMethod: function(counter) {
        console.log(counter++)
     }
  }
};
</script>


{{counter}}

点击我

HeadlineLifeCycle.vue

<template>
    <div>
        <p>{{counter}}</p>
        <button @click="add">Click me</button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },

  methods: {
      add() {
        this.$emit('updated', this.counter)
      }
  },
};
</script>

<template>
  <div>
      <LifeCycles @updated="usefulMethod" />
  </div>
</template>

<script>
import LifeCycles from "./LifeCycles.vue";
export default {
  components: {
    LifeCycles,
  },

  methods: {
     usefulMethod: function(counter) {
        console.log(counter++)
     }
  }
};
</script>


从“/LifeCycles.vue”导入生命周期；
导出默认值{
组成部分：{
生命周期，
},
数据（）{
返回{
柜台:0,，
};
},
方法：{
增加：职能（）{
console.log（this.counter++）
}
}
};


您还可以将变量作为
model
传递给lifecycle.vue，并在
lifecycle
组件中管理其值