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>