目录
1.defineProps defineEmits defineExpose/ref
2.v-model 组件标签可同时写多个v-model 不再支持 .sync
4.attrs 会包含父组件的props 属性的集合 一旦用props接收，attrs
基于vue 3.2
1.defineProps defineEmits defineExpose/ref
-
<template>
-
<div>
-
<button @click="changeSonValue">changeNum
</button>
-
<h1>{{ n }}
</h1>
-
<h1 v-for="(item, index) in obj">{{ item }}
</h1>
-
</div>
-
</template>
-
<script setup>
-
import { ref, watch }
from
"vue";
-
// let props = defineProps(["num", "obj","changeNum"]); //简单
-
let props =
defineProps({
num:{
type:
Number},
obj:{
type:
Object}})
//限制类型
-
let n =
ref(props.
num);
//props 获取所有props的对象
-
// console.log(n);
-
const
changeSonValue = (
) => {
-
n.
value++;
-
};
-
-
let
changeNumFromFather = (
)=>{
-
props.
changeNum()
-
}
-
-
-
watch(n,
(n,o)=>{
-
console.
log(n);
-
},{
immediate:
true,
deep:
true});
-
-
watch(props.
obj,
(n,o)=>{
-
console.
log(n);
-
},{
deep:
true,
immediate:
true})
-
-
watch([n,props.
obj],
()=>{})
//多个监视用数组
-
-
</script>
-
<style scoped></style>
-
//father
-
<!--
-
*
new page
-
* @
author: keepCoding-gyk
-
* @
since:
2022-
12-
04
-
* father.
vue
-
-->
-
<template>
-
<div>
-
<h1>
-
{{num}}
-
<son @changeNum="getNum">
</son>
-
</h1>
-
</div>
-
</template>
-
-
<script setup>
-
import { ref }
from
'vue';
-
import son
from
'./son.vue'
-
let num =
ref(
666);
-
-
let
getNum = (
v)=>{
-
num.
value+=v
-
}
-
-
</script>
-
-
<style lang="scss" scoped>
-
</style>
-
-
//son
-
<!--
-
*
new page
-
* @
author: keepCoding-gyk
-
* @
since:
2022-
12-
04
-
* son.
vue
-
-->
-
<template>
-
<div>
-
<button @click="changeNumFromFather">changeNumFromFather
</button>
-
</div>
-
</template>
-
-
<script setup>
-
let emits =
defineEmits([
'changeNum']);
-
let
changeNumFromFather =(
)=>{
-
emits(
'changeNum',
1)
-
}
-
</script>
-
-
<style lang="scss" scoped></style>
defineExpose 父组件需要借助ref
-
<!--
-
*
new page
-
* @
author: keepCoding-gyk
-
* @
since:
2022-
12-
04
-
* father.
vue
-
-->
-
<template>
-
<div >
-
<son ref="son1">
</son>
-
<button @click="test">test
</button>
-
</div>
-
</template>
-
-
<script setup >
-
import son
from
'./son.vue';
-
import { ref }
from
'vue';
-
const son1 =
ref(
null)
-
console.
log(son1);
-
let
test = (
)=>{
-
console.
log(son1.
value.
num);
-
son1.
value.
changeNum()
-
}
-
</script>
-
-
<style lang="scss" scoped>
-
</style>
-
-
<!--
-
*
new page
-
* @
author: keepCoding-gyk
-
* @
since:
2022-
12-
04
-
* son.
vue
-
-->
-
<template>
-
<div>
-
<h1>{{num}}
</h1>
-
</div>
-
</template>
-
-
<script setup>
-
import { ref }
from
'vue';
-
-
let num =
ref(
666);
-
-
let
changeNum = (
)=>{
-
num.
value ++
-
}
-
defineExpose ({num,changeNum});
-
-
</script>
-
-
<style lang="scss" scoped>
-
</style>
-
ts写法
defineProps 三种写法
-
let props=
defineProps([
'str'])
-
console.
log(props);
-
-
let props =
defineProps({
-
str:
String,
-
arr:{
-
type:
Object,
-
default:
()=>[
1,
2]
-
}
-
})
-
-
let props = defineProps<{
-
str:string,
-
arr:number[]
-
}>()
-
-
-
withDefaults(defineProps<{
//设置默认值
-
str:string,
-
arr:number[]
-
}>(),{
-
arr:
()=>[
666]
-
})
defineEmit
-
let emit =
defineEmits([
'ca'])
-
-
let emit = defineEmits<{
// 可以对每一个参数进行限制
-
(
e:
'ca',
a:string,
b:number,
c:string):
void
-
}>()
-
-
let
changeArr = (
)=>{
-
emit(
'ca',
'999',
88,
'jjj')
-
}
defineExpose
-
defineExpose<{
n:string,
s:
Function}>({
-
n:
'999',
-
s:
()=>
console.
log(
'999'),
-
})
-
-
let wf = ref<
InstanceType<
typeof sVue>>();
-
onMounted(
()=>{
-
wf.
value?.
s();
-
console.
log(wf.
value?.
n);
-
})
2.v-model 组件标签可同时写多个v-model 不再支持 .sync
-
<!--
-
*
new page
-
* @
author: keepCoding-gyk
-
* @
since:
2022-
12-
04
-
* father.
vue
-
-->
-
<template>
-
<div >
-
<h1>father {{num1}}
</h1>
-
<sonVue v-model:value1="num1" v-model:value2="num2" >
</sonVue>
-
</div>
-
</template>
-
-
<script setup >
-
import { ref }
from
'vue';
-
import sonVue
from
'./son.vue';
-
let num1 =
ref(
666);
-
let num2 =
ref(
888)
-
</script>
-
-
<style lang="scss" scoped>
-
</style>
-
-
<!--
-
*
new page
-
* @
author: keepCoding-gyk
-
* @
since:
2022-
12-
04
-
* son.
vue
-
-->
-
-
<template>
-
<div>
-
<input type="text" v-model="num" @change="changeFatherValue1">
-
<button @click="changeFatherValue1">46546546
</button>
-
</div>
-
</template>
-
-
<script setup>
-
import { ref }
from
'vue';
-
-
-
let props =
defineProps({
value1:{},
value2:{}})
//{value:{}}
-
let emits =
defineEmits([
'value1'])
-
let num =
ref(props.
value1)
-
let
changeFatherValue1 = (
)=>{
-
emits(
'update:value1',num.
value)
-
}
-
</script>
-
-
<style lang="scss" scoped>
-
</style>
-
3.provide inject
-
<!--
-
*
new page
-
* @
author: keepCoding-gyk
-
* @
since:
2022-
12-
05
-
* grand.
vue
-
-->
-
<template>
-
<div >
-
<h1>grand
</h1>
-
<father>
</father>
-
</div>
-
</template>
-
-
<script setup >
-
import { getCurrentInstance, provide, ref }
from
'vue';
-
import father
from
'./father.vue'
-
let num =
ref(
10);
-
provide(
'num',num.
value);
-
provide(
'test',
99999999)
-
-
</script>
-
-
<style lang="scss" scoped>
-
</style>
-
-
<!--
-
*
new page
-
* @
author: keepCoding-gyk
-
* @
since:
2022-
12-
05
-
* father.
vue
-
-->
-
<template>
-
<div >
-
<son>
</son>
-
</div>
-
</template>
-
-
<script setup >
-
import son
from
'./son.vue'
-
-
</script>
-
-
<style lang="scss" scoped>
-
</style>
-
-
<!--
-
*
new page
-
* @
author: keepCoding-gyk
-
* @
since:
2022-
12-
05
-
* son.
vue
-
-->
-
<template>
-
<div >
-
</div>
-
</template>
-
-
<script setup >
-
import { inject }
from
'vue';
-
let num =
inject(
'num');
-
console.
log(num);
-
let test =
inject(
'test');
-
console.
log(test);
-
-
-
</script>
-
-
<style lang="scss" scoped>
-
</style>
-
4.attrs 会包含父组件的props 属性的集合 一旦用props接收，attrs
就接收不到了
-
<!--
-
*
new page
-
* @
author: keepCoding-gyk
-
* @
since:
2022-
12-
05
-
* father.
vue
-
-->
-
<template>
-
<div >
-
<son :m1="m1" :m2="m2">
</son>
-
</div>
-
</template>
-
-
<script setup >
-
import { ref }
from
'vue';
-
import son
from
'./son.vue'
-
-
-
let m1 =
ref(
10);
-
let m2 =
ref(
100);
-
-
</script>
-
-
<style lang="scss" scoped>
-
</style>
-
-
-
<!--
-
*
new page
-
* @
author: keepCoding-gyk
-
* @
since:
2022-
12-
05
-
* son.
vue
-
-->
-
<template>
-
<div >
-
</div>
-
</template>
-
-
<script setup >
-
import { useAttrs }
from
'vue';
-
let props =
defineProps([
'm1']);
-
let attrs =
useAttrs();
-
console.
log(attrs);
-
</script>
-
-
<style lang="scss" scoped>
-
</style>
-
-
5.插槽
| vue2 | |
| 匿名插槽 | <slot/> |
| 具名 | <slot name="xxx"/> 模版标签 v-slot:xxx 或 #xxx |
| 作用域 | <slot :name="xxx"/> 模版 slot-scope="{name}" |
| vue3 | 匿名 具名不变 |
| 作用域 | <slot :name="xxx"/> 模版 v-slot="{name}" 或者 #default="{name}" 或者 v-slot:default="slotProps" |
动态插槽
-
<template #[dyniamic]>
-
<h1>{{ dyniamic }}</h1>
-
</template>
-
-
import { ref }
from
'vue';
-
let dyniamic =
ref(
'dyniamic')
-
let
dyniamicChange = (
)=>{
-
dyniamic.
value =
'test'
-
}
-
-
<slot name=
"dyniamic"></slot>
-
<slot name="test"></slot>
具名插槽也可以 当作用域 用
-
<template v-
slot:app=
"scope">
-
{{ scope }}
-
</template>
-
-
<slot name="app" :msg="arr"></slot>
6.Vuex pinia
https://blog.csdn.net/gu2022_3_5_21_23/category_12150734.html
7. provide inject
支持向子组件注射穿透 ，可以多级使用
父组件
-
//父组件
-
import sonVue
from
'./com/son.vue';
-
import { provide }
from
'vue';
-
provide(
'qq',
'sss')
-
provide(
'test',
'你好世界');
子组件 或 孙组件
-
let qq=inject<string>(
'qq')
-
let test =
inject(
'test')
8.mitt
由于 Vue 3 原型上 没有了 $on , 所以原来的事件总线 不能用了，但是 现在有一个包 延续了 该种通信方式 那就是 mitt
npm i mitt -Smitt.js 创建一个实例
-
import mitt
from
'mitt'
-
let mitts =
mitt()
-
export
default mitts
组件A
-
let str =
ref(
"你好世界");
-
let
handleStr = (
) => {
-
mitt.
emit(
"getStr", str.
value);
-
};
组件B
-
mitt.
on(
'getStr',
(v)=>{
-
str.
value = v
-
})
-
onUnmounted(
()=>{
-
mitt.
off(
'getStr')
-
})
转载：https://blog.csdn.net/gu2022_3_5_21_23/article/details/128178062
查看评论