vue3中的子传父 自定义事件

vue3中的子传父 自定义事件

第一种写法 emits 数组写法

父组件
<template>
  <div id="app">
    {{ num }}
    <one @jia="jia" @jian="jian" @text="text"></one>
  </div>
</template>

<script>
import one from "./components/one.vue";
export default {
  components: {
    one,
  },
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    jia() {
      this.num++;
    },
    jian() {
      this.num--;
    },
    text(text) {
      this.num += Number(text);
    },
  },
};
</script>


子组件
<template>
  <div>
    <button @click="add">+1</button>
    <button @click="app">-1</button>
    <button @click="ann">+n</button>
    <input v-model="text" />
  </div>
</template>

<script>
export default {
  emits: ["jia", "jian", "text"],   注意这里 vue3这样写
  data() {
    return {
      text: "",
    };
  },

  methods: {
    add() {
      this.$emit("jia");
    },
    app() {
      this.$emit("jian");
    },
    ann() {
      this.$emit("text", this.text);
    },
  },
};
</script>

第二种写法 emits 对象写法（用来做数值类型验证）

注意

• 如果验证失败 值仍然会传过去 但是控制台会报警告消息 是警告消息 不是错误消息

父组件
<template>
  <div id="app">
    {{ num }}
    <one @jia="jia" @jian="jian" @text="text"></one>
  </div>
</template>

<script>
import one from "./components/one.vue";
export default {
  components: {
    one,
  },
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    jia() {
      this.num++;
    },
    jian() {
      this.num--;
    },
    text(text) {
      this.num += Number(text);
    },
  },
};
</script>


子组件
<template>
  <div>
    <button @click="add">+1</button>
    <button @click="app">-1</button>
    <button @click="ann">+n</button>
    <input v-model="texts" />
  </div>
</template>
<script>
export default {
   emits: {                        
    jia: null,
    jian: null,                null 不做验证
    textss: (a, b, c) => {    return 为true 验证通过 false 验证不通过 
      if (a > 10) {
        return true;
      }
    },
  },        
  data() {
    return {
      texts: "",
    };
  },

  methods: {
    add() {
      this.$emit("jia");
    },
    app() {
      this.$emit("jian");
    },
    ann() {
      this.$emit("textss", Number(this.texts), "18", "徐涛");
    },
  },
};
</script>