hook

<script setup>
import { onMounted } from "vue";

// hook使用方式
onMounted(()=>{
    console.log(1);
})
</script>

官网地址:https://vuejs.org/api/composition-api-lifecycle.html#onmounted

组件

直接导入

<script setup>
import Banner from '../components/Banner.vue'
</script>

路由

需导入useRouter，useRoute

<script setup>
// 导入
import { useRouter , useRoute} from 'vue-router'
// 使用
const router = useRouter()
const route = useRoute()
// 常规使用
router.push('/')
</script>

子组件给父组件传参(emit)

// 父组件
<template>
  // 自定义事件
  <TopNav @changeView="changeView"></TopNav>
</template>
<script setup>
// 自定义事件
const changeView = (i) => {
 // 处理传递的数据或者其它
  }
}
// 函数的不同写法
function changeView(i){}
</script>


// 子组件
<template>
    // 点击事件
    <span @click="choose(index)"></span>
</template>
<script setup>
// 默认导入。可以不写
import { defineEmits } from 'vue'
// 绑定emit事件
const emit = defineEmits(['changeView'])
const choose = (i)=> {
    // 触发emit事件并且传递参数
    emit('changeView', i)
}
</script>