vue 复习，子元素给父亲元素发送事件

最新推荐文章于 2022-03-09 22:44:04 发布

爱生活，爱编程

最新推荐文章于 2022-03-09 22:44:04 发布

阅读量231

点赞数

分类专栏： VUE2.x

本文链接：https://blog.csdn.net/qq_15009739/article/details/108645314

版权

VUE2.x 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

Child.vue

<template>
  <div>
    <p>child</p>
    <el-button @click="gogo">$on</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    gogo() {
      this.$emit("gogo2", { payload: "java" });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

App.vue

<template>
  <div id="app">
    <p>action is power</p>
    <p>{{message}}</p>
    <button @click="addPrice">addPrice</button>
    <button @click="subPrice">subPrice</button>
    <ul>
      <li v-for="(item,index) in courses" :key="index">{{ item.name }} ---{{item.price}}</li>
    </ul>

    <Child @gogo2="go"></Child>
  </div>
</template>

<script>
import Vue from "vue";
import Child from "@/components/Child";
export default {
  name: "app",
  components: {
    Child,
  },
  methods: {
    go(payload) {
      console.log(payload + "payload....");
    },
    addPrice() {
      this.courses.forEach((item) => {
        // item.price = 1000;
        Vue.set(item, "price", 999);
      });
    },
    subPrice() {
      Vue.delete(this.courses[0], "price");
    },
  },
  data() {
    return {
      message: "java",
      courses: [
        {
          name: "java",
        },
        {
          name: "php",
        },
        {
          name: "node",
        },
        {
          name: "css",
        },
      ],
    };
  },
};
</script>

<style lang = "scss">
#app {
}
</style>

我犯了低错误

下面是错误写法！