<template>
<Map ref="ref_map"/>
</template>
<script setup>
import {
computed,
reactive,
ref,
watchEffect,
watch,
nextTick,
toRefs,
onMounted,
defineProps,
defineEmits,
useSlots,
useAttrs
} from "vue";
import { useRouter, useRoute } from 'vue-router'
import Map from "./components/map.vue" //组件直接引入即可使用,不需注册
const slots = useSlots()
const attrs = useAttrs()
//setup标签 中的变量和函数 不需要return
const state = reactive({
color:"red",
previewData:{}
})
const num = ref("")
//赋值时 ref类型需要用value reactive则不需要
num.value = "ref"
// ts语法中以下没有在原对象中声明的会报红线 加上// @ts-ignore即可
// @ts-ignore
state.previewData.url = "reactive"
const router = useRouter() //路由跳转等信息 相当于 $router
const route = useRoute() // $route
const props = defineProps({ //使用 props 接收传值
foo: String,
})
//使用 $emit-------start-----
const emit = defineEmits(['clickHandler'])
function clickHandler (e) {
emit("clickHandler", e)
}
//使用 $emit-------end-------
//访问子组件变量、函数等---start------
//父组件
const ref_map = ref({})
ref_map.value.fontSizeAdap(5) //注意:所有变量函数,均在value中
// 子组件
defineExpose({ // 暴露需要访问的变量、函数 供父组件使用
state,
fontSizeAdap
})
//访问子组件变量、函数等---end---------
// <script setup> 中可以使用顶层 await。结果代码会被编译成 async setup()
const post = await axios(`/api/post/1`).then(r => r.json())
// 监听属性
//原watch
watch(state.color, (newval, oldValue) => {})
// watchEffect: 监视所有回调中使用的数据,默认立即执行,自动的收集依赖
watchEffect(()=>{
console.log(state.color,"state.color")
})
//计算属性
const count = computed(() => num + 1)
</script>
<style>
/* 状态驱动的动态 CSS */
/* script setup中语法,且支持JS表达式 ,(需要用引号包裹起来)*/
h1{
color: v-bind('state.color');
}
/* script 中语法 */
h1{
color: v-bind(color);
}
</style>