摘要：
插槽：vue3建议写入v-Slot。与@和：v-slot类似，它们也可以简化为#符号。演示如下：子组件的编写保持不变：hello:从“@vue/reactive”导入{reactive}；Constobj=reactiveconstsetName==˃{obj.name=name}/***要向父组件公开的方法和属性必须写入defineExpose，否则*/defineExpose父组件：｛//无法修改子组件的属性？
slot：
vue3推荐v-slot的写法，类似@和：v-slot也可以简化为#符号，demo如下：
子组件写法不变：
<template> <div> hello: <slot name="fruits" :fruitsName="obj.name" :freshness="obj.freshness"> </slot> </div> </template> <script setup lang="ts"> import { reactive } from "@vue/reactivity"; const obj = reactive({name:'桃子',freshness:5}) const setName = (name:string)=>{ obj.name = name } /** * 要对父组件暴露的方法和属性必须都写到defineExpose中，不然获取不到 */ defineExpose({obj,setName}) </script> <style lang='scss' scoped> </style>
父组件：
<template>
<div>
<navList ref="navlistRef">
<!-- #fruits相当于v-slot:fruits等号后面的东西相当于vue2的slot-scope -->
<template #fruits="obj">我是水果1号,{{JSON.stringify(obj)}}</template>
</navList>
<button @click="navlistChange">改你的水果一号</button>
{{num.name}}
</div>
</template>
<script setup lang="ts">
import { ref,toRefs} from 'vue';
import navList from './components/NavList.vue'
/**
* ref的写法是给原对象创建了一个副本（拷贝）,修改后不会影响原对象的值，但是对象类型的做了ref操作后会简历reactive的响应式，这时候更改了ref的对象的属性值会影响原对象。ref会让UI从新渲染
*/
const navlistRef = ref<{obj:{name:string,freshness:number},setName:Function}|null>()
/**
* torefs的写法修改后会影响原对象，因为是引用的之前的对象的地址，但是这是响应式的,修改后UI不变
*/
let num = toRefs({name:'zs',sex:14})
var resource = {other:{sex:1},address:'大道西侧'}
const info = toRefs(resource)
var resource1 = {name:'zds'}
const info1 = ref(resource1.name)
const navlistChange=()=>{
//子组件的属性依然不可以去修改
navlistRef.value?.obj?.name;
num.name.value='12'
//但是可以通过调用子组件的方法修改子组件的属性
navlistRef.value?.setName('葡萄')
info.other.value.sex=2
info.address.value="大道东侧"
console.log(resource,resource1)
info1.value='lsd'
debugger
}
</script>
<style lang='scss' scoped>
</style>