父传子

<script setup lang="ts">
import SonOne from './components/SonOne.vue';
import {ref} from 'vue'
let title = ref(999)
</script>

<template>
  <div>
    <!-- <SonOne msg="hello world" :title="title"></SonOne> -->
     <SonOne></SonOne>
  </div>
 
</template>

<style scoped>

</style>

 SonOne.vue

<script setup lang="ts">
// difineProps编译宏无需引入直接使用
// 第一种使用方式
    // defineProps(['msg','title'])
    // 第二种使用方式
    // let prors = defineProps(['msg','title'])
    // console.log('props',prors);

    // 第三种写法结合我们的ts去使用
    // interface PropsMsg{
    //   msg:string,
    //   title?:number
    // }

    // let prors = defineProps<PropsMsg>()

    // 引入
    // import type {PropsMsg} from './type/type'
    
    // 第四种 对象结构的写法
    // import type { PropsMsg } from './type/type';
    // let {msg='我是默认的字符串',title=666} = defineProps<PropsMsg>()

    // 第五种写法 需要借助一个编译器宏 withDefaults 无需引入直接使用
    import type {PropsMsg} from './type/type'
    // withDefaults 帮助程序为默认值提供类型检查
    let props = withDefaults(defineProps<PropsMsg>(),{
      msg:"我是默认值"
    })
</script>

<template>
  <div>
    <h1>这是子组件-one--{{ msg }}--{{ title }}</h1>
    <!-- <h1>这是子组件-one--{{ prors.msg }}--{{ prors.title }}</h1> -->

  </div>

</template>

<style scoped>

</style>

type.ts 

export interface PropsMsg{
    msg?:string,
    title?:number
}

子传父

<script setup lang="ts">
import SonTwo from './components/SonTwo.vue';
let acceptMoney = (data:number)=>{
  console.log('data',data);
}
</script>

<template>
  <div>
    <SonTwo @giveFatherMoney="acceptMoney"></SonTwo>
  </div>

</template>

<style scoped>

</style>

 SonTwo.vue

<template>
    <div>
        <h1>这是子组件--two</h1>
        <button @click="giveFather">子组件向父组件传值</button>
    </div>
</template>

<script lang="ts" setup>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// 和 defineProps 类似，defineEmits 仅可用于 <script setup> 之中，
// 并且不需要导入，它返回一个等同于 $emit 方法的 emit 函数

// defineProps 和 defineEmits 都是在 <script setup> 中使用的编译时宏
// 需要放置在script setup 的顶层作用域

// let emit = defineEmits(['giveFatherMoney'])
// let giveFather =()=>{
//     emit('giveFatherMoney',1000)
// }
// 第二种写法
// interface Props {
//     giveFatherMoney:[money:number] 
// }
let emit = defineEmits<{
    giveFatherMoney:[money:number]
}>()
let giveFather = ()=>{
    emit('giveFatherMoney',1000)
}
</script>

<style>

</style>

兄弟之间传值

<script setup lang="ts">
console.log('this',this);
import { getCurrentInstance } from 'vue';
let {proxy} = getCurrentInstance() as any
console.log('proxy',proxy.msg);
import SonThree from './components/SonThree.vue';
import SonFour from './components/SonFour.vue';

</script>

<template>
  <div>
    <SonThree></SonThree>
    <SonFour></SonFour>
  </div>

</template>

<style scoped>

</style>

SonThree.vue

<template>
    <div>
       <h1>我是组件三</h1>
       <button @click="giveBrother">给兄弟四传递数据</button>
    </div>
</template>

<script lang="ts" setup>
import { getCurrentInstance } from 'vue';
let {proxy} = getCurrentInstance() as any
console.log(proxy.$mitt);
let giveBrother = ()=>{
    proxy.$mitt.emit('自定义事件名','给兄弟四传数据')
}

</script>

<style>

</style>

SonFour.vue

<template>
    <div>
       <h1>我是组件四</h1>
    </div>
</template>

<script lang="ts" setup>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import { getCurrentInstance } from 'vue';
  let {proxy} =getCurrentInstance() as any
  proxy.$mitt.on('自定义事件名',(data:string)=>{
    console.log('data',data);
    
  })
</script>

<style>

</style>

v-model传值的基本使用

<script setup lang="ts">
// v-model 可以在组件上使用以实现双向绑定
import SonFive from './components/SonFive.vue';
import {ref} from 'vue'
let num = ref(0)

</script>

<template>
  <div>
   <h1>这是根组件--{{ num }}</h1>
   <SonFive v-model="num"></SonFive>
  </div>

</template>

<style scoped>

</style>

SonFive.vue

<template>
    <div>
       <h1>我是组件五--{{ model }}</h1>
       <button @click="changeNum">num++</button>
    </div>
</template>

<script lang="ts" setup>
import type {ref} from 'vue'

// 通过编译宏拿到数据双向绑定的值
let model = defineModel() as Ref
console.log('model',model);
let changeNum =()=>{
    model.value++
}

</script>

<style>

</style>

v-model的参数

<script setup lang="ts">
// v-model 可以在组件上使用以实现双向绑定

import {ref} from 'vue'
import SonSix from './components/SonSix.vue';
let title = ref('标题')

</script>

<template>
  <div>
   <h1>父组件--{{ title }}</h1>
   <SonSix v-model:title="title"></SonSix>
  </div>
 
</template>

<style scoped>

</style>

SonSix.vue

<template>
    <div>
       <h1>我是组件六</h1>
       <input type="text" v-model="title">
    </div>
</template>

<script lang="ts" setup>
let title = defineModel('title')
</script>

<style>

</style>

依赖注入

<script setup lang="ts">

import SonSeven from './components/SonSeven.vue';
import { provide } from 'vue';
provide('obj',{name:"张三"})

</script>

<template>
  <!-- 一个父组件相对于其所有的后代组件，会作为依赖提供者。
  任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。 -->
  <div>
   <SonSeven></SonSeven>

  </div>

</template>

<style scoped>

</style>

SonSeven.vue

<template>
    <div>
       <h1>我是组件七</h1>
       <SonEight></SonEight>
    </div>
</template>

<script lang="ts" setup>
import SonEight from './SonEight.vue';
import { inject } from 'vue';
let aa = inject('obj')
console.log('aa',aa);

</script>

<style>

</style>

路由

<script setup lang="ts">
// import { RouterView } from 'vue-router';

</script>

<template>
  <!-- 一个父组件相对于其所有的后代组件，会作为依赖提供者。
  任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。 -->
  <div>
  <RouterView></RouterView>
<!-- <router-view></router-view> -->
  </div>

</template>

<style scoped>

</style>

AboutPage.vue

<template>
    <div>
      <h1>关于我们--{{ route.query.id }}</h1>
    </div>
</template>

<script lang="ts" setup>
// import router from '@/router';
import { useRoute } from 'vue-router';
const route = useRoute()
console.log('route',route);

</script>

<style>

</style>

HomeIndex.vue

<template>
    <div>
      <h1>首页</h1>
      <button @click="jump">跳转</button>
    </div>
</template>

<script lang="ts" setup>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { useRouter } from 'vue-router';
const router = useRouter()
let jump =()=>{
    // this.$router.push('/about')
    router.push({path:"/about",query:{id:1}})
}

</script>

<style>

</style>