Vue3 defineProps使用

MyTag.vue

<script setup>
import { ref, nextTick, defineProps, defineEmits } from "vue";
const props = defineProps({
  flag: Boolean,
  title: String,
});
// 写成这样也可以
// const props = defineProps(["flag", "title"]);

const emit = defineEmits(["changeFlag"]);
const inp = ref(null);
const newTitle = ref("");
const changeName = () => {
  console.log("props", props);
  emit("changeName", newTitle.value);
  emit("changeFlag", !props.flag);
};
const dblfun = () => {
  newTitle.value = props.title;
  emit("changeFlag", !props.flag);
  nextTick(() => {
    inp.value.focus();
  });
};
const funBlur = () => {
  console.log("Blur" + newTitle.value);
  emit("changeFlag", true);
};
</script>

<template>
  <div class="app">
    <div v-show="flag" @dblclick="dblfun">
      <h1>{{ title }}</h1>
    </div>
    <div v-show="!flag">
      <input
        ref="inp"
        v-model="newTitle"
        @keyup.enter="changeName"
        @blur="funBlur"
        type="text"
      />
    </div>
  </div>
</template>

<style scoped>
.son1 {
  width: 100%;
  height: 150px;
  border: 3px red solid;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

父组件
App.vue

<script setup>
import MyTag from "./components/MyTag.vue";
import { ref } from "vue";
const flag = ref(true);
const title = ref("slx");
const changeFlag = (tt) => {
  flag.value = tt;
};
const changeName = (tt) => {
  console.log("tt", tt);

  title.value = tt;
};
</script>

<template>
  <div class="app">
    <MyTag
      @changeFlag="changeFlag"
      @changeName="changeName"
      :flag="flag"
      :title="title"
    ></MyTag>
  </div>
</template>

<style scoped>
.son1 {
  width: 100%;
  height: 150px;
  border: 3px red solid;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34