Vue -- 总结 10

父传子

<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 anyproxy.$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>