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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM