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"><inputref="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>

父组件
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>