切换模式
vue3 setup 模板
vue3 项目页面模板代码
vue
<template>
<div>{{ title }}</div>
</template>
<script>
import { reactive, toRefs } from "vue"
export default {
name: "temp",
setup() {
const data = reactive({
title: "模板"
})
return {
...toRefs(data)
}
}
};
</script>
<style lang="scss" scoped>
</style><template>
<div>{{ title }}</div>
</template>
<script>
import { reactive, toRefs } from "vue"
export default {
name: "temp",
setup() {
const data = reactive({
title: "模板"
})
return {
...toRefs(data)
}
}
};
</script>
<style lang="scss" scoped>
</style>弹窗组件模板代码
父组件调用子组件 openDialog() 方法打开弹窗
vue
<template>
<el-dialog v-model="dialogVisible" title="弹窗名称" width="700px">
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确认</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</span>
</template>
</el-dialog>
</template>
<script>
import { reactive, toRefs } from "vue"
export default {
name: "temp",
setup() {
const data = reactive({
dialogVisible: false
})
const openDialog = () => {
data.dialogVisible = true
}
return {
...toRefs(data),
openDialog
}
}
};
</script>
<style lang="scss" scoped>
</style><template>
<el-dialog v-model="dialogVisible" title="弹窗名称" width="700px">
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="dialogVisible = false">确认</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</span>
</template>
</el-dialog>
</template>
<script>
import { reactive, toRefs } from "vue"
export default {
name: "temp",
setup() {
const data = reactive({
dialogVisible: false
})
const openDialog = () => {
data.dialogVisible = true
}
return {
...toRefs(data),
openDialog
}
}
};
</script>
<style lang="scss" scoped>
</style>