前言：
起初 Vue3.0 暴露变量必须 return 出来，template 中才能使用；
Vue3.2 中 只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中，无需 return，template 可直接使用。
ref的使用 以及 组件的引入
父组件引入子组件时，会自动注册，不在需要使用components 进行注册
// 子组件中 有属性 ：name 和 方法 onSave()
<child ref='childRef' />
<script setup>
import { ref } from 'vue';
import child from './child.vue';
// 获取 ref 需要通过 InstanceType 获取实例类型 ts 情况下
const childRef = ref<InstanceType <typeop child>>();
// js情况下
const childRef = ref(null);
// 使用子组件的属性以及方法
childRef.value?.name;
childRef.value?.onSave();
</script>
// 子组件
// 在语法糖中如果想调用子组件中的 name属性以及 方法 onSave() 需要使用
defineExpose 进行暴露
<script setup>
import { defineExpose,ref } from ‘vue’;
let name = ref('huai');
const onSave = ()=>{
console.log('huai')
}
// 使用 defineExpose 包裹导出
defineExpose({
name,
onSave
})
</script>
在 v-for 中获取 通过ref获取子组件的实例
需要分循环体是固定，还是动态
1. 循环体是固定的，不会改变的
不能使用该方法去操作动态的循环体，不然会出现子实例重复的问题
<div v-for="item in 10" :key="item">
<child :ref='childRefs'/>
</div
<script setup>
// 子组件实例数组
const childRefList = ref([])
// 通过 childRefs 方法向 childRefList 添加子组件实例
const childRefs = (el) => {
childRefList.value.push(el)
}
</script>
2.循环体是动态的
<div v-for="(item, i) in childList" :key="item">
<child :ref='(el) => childRefs[i] = el'/>
</div>
<script setup>
// childList 是动态添加，或者删除
const childNums = ref(1)
// 子组件实例数组
const childRefs = ref([])
</script>
props
3.0版本下使用
<script>
export default defineComponent({
props:{
name:{
type:String,
default:'huai'
}
},
setup(props,content){
// 使用props
props.name
}
})
</script>
3.2.0版本下使用
// 使用 defineProps 可以直接使用
<div>{{name}}</div>
<script setup>
import {defineProps} from 'vue';
defindProps({
name:{
type:String,
default:'huai'
}
})
</script>
emit的使用
1.3.0 中使用emit
<script>
emits:['updataName'],
setup(props,{emit}){
const onSave = ()=> emit('updataName','huaiyaya');
return {
onSave
}
}
</script>
2.语法糖中使用emit
<script setup>
import { defineEmits} from ‘vue’
const emit = defineEmits(['updateName']);
onSave = ()=>{
emit('updateName',‘huaiyaya’)
}
</script>
v-model 与 emit 配合使用
vue3 中支持绑定多个v-model，v-model 是 v-model:modelValue 的简写，同时也可以支持绑定其他字段，如： v-model:age
// 父组件
<child v-model='state.name' v-model:age='state.age'>
<script setup>
import {reactive,watchEffect} from 'vue';
let state = reactive({name:'huai',age:18});
watchEffect(()=>state.name,(nVal,oVale)=>{
// 输出 huaiyaya
console.log(nVale)
},
{
deep:true
}
)
</script>
// 子组件
<script setup>
import {defineProps,defineEmits} from 'vue'
// modelValue 对应的是v-model
defineProps(['modelValue','age']);
const emit = defineEmits(['update:modelValue', 'update:age']);
// 触发更新值，父组件中绑定的值也会被更新
const onUpdate = ()=>{
emit('update:modelValue','huaiyaya');
emit('update:age',19);
}
</script>
v-bind css 的绑定
<script setup>
import { ref ,defineProps} from 'vue';
defineProps(['color'])
let border = ref("border:1px solid");
</script>
<style lang="scss" scoped>
span {
// 使用常量接收的样式
border: v-bind('border');
// 使用props接收的样式
color:v-bind('props.color');
}
await
在语法糖中不在需要使用 asyac 只需要在 模版顶部使用<Suspense></Suspense>进行套用
<Suspense>
<div></div>
</Suspense>
<script setup>
const post = await getInfo('/info').then(() => {})
</script>
