vue3的一些基本常識（slot，ref）

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>