最好的外贸网站建设营销推广外包

十八 插槽

1 默认插槽

使用slot实现默认插槽，默认插槽的默认名字为default。

可以直接在调用组件时使用，也可以用<slot name="default">使用。

父组件

import { reactive } from 'vue'
import Card2 from './Card2.vue'
let data1_list = reactive([{name: '张三',age: 18,sex: '男',address: '北京市'},{name: '李四',age: 20,sex: '女',address: '上海市'},{name: '王五',age: 22,sex: '男',address: '湖南省'}
])<div class="main"><div v-for="(value,key) in data1_list" :key="key"><Card2 :title="value.name"><p>age:{{value.age}}</p><p>address:{{value.address}}</p></Card2></div> 
</div>
<br>
<div class="main"><div v-for="(value,key) in data1_list" :key="key"><Card2 :title="value.name"><slot name="default"><p>age:{{value.age}}</p><p>address:{{value.address}}</p></slot></Card2></div> 
</div>

子组件

defineProps(["title"])<div class="card2"><p class="title">{{title}}</p><slot></slot>
</div>

2 具名插槽

子组件在slot标签上设置name属性。

父组件可以使用<template #插槽名>或<template v-slot:插槽名>调用。

父组件

import { reactive } from 'vue'
import Card2 from './Card2.vue'
let data2_imglist = reactive([{id: 1,title:"img1", url: 'https://images.pexels.com/photos/19651099/pexels-photo-19651099.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'},{id: 2,title:"img2", url: 'https://cdn.pixabay.com/photo/2016/06/24/23/20/mosque-1478052_960_720.png'},
])<div class="main"><div v-for="(value,key) in data2_imglist" :key="key"><Card2><template #title>{{value.title}}</template><template v-slot:content><img :src="value.url" alt=""></template></Card2></div> 
</div>

子组件

defineProps(["title"])<div class="card2"><p class="title" v-if="title">{{title}}</p><p class="title2" v-else><slot name="title"></slot></p><slot></slot><div class="content"><slot name="content"></slot></div>
</div>

3 作用域插槽

数据在子组件中，父组件实现子组件数据显示结构。

父组件获取的数据有作用域，所以叫作用域插槽……

其实就是针对有作用域数据的插槽，因为在子组件里所以有作用域。

父组件

import { reactive } from 'vue'
import Card2 from './Card2.vue'<Card2 :list="data2_article"><template #article="params"> <div>{{params.list}}</div></template>
</Card2><Card2><template #article="{list}"> <div class="main"><div v-for="(value,key) in list" :key="key" class="article"><img :src="value.img" alt=""><div class="div_content"><div class="title">{{ value.title }}</div><div class="content">{{ value.content }}</div></div></div></div></template>
</Card2>

子组件

let data2_article = reactive([{id:1,title: '标题1',content: '张楚岚原本与爷爷过着平静的生活，但爷爷去世后尸体被盗，神秘少女冯宝宝突然出现，彻底颠覆了他的校园生活。冯宝宝对张楚岚异常熟悉，并带他加入了一家名为“哪都通”的快递公司，实际上这是一个管理异人的秘密组织。',img:"https://images.pexels.com/photos/19651099/pexels-photo-19651099.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"},{id:2,title: '标题2',content: '为了解开爷爷和自身的秘密，张楚岚与冯宝宝踏上了“异人”之旅。他们参加了异人界的盛会“罗天大醮”，并逐渐揭开了关于“八奇技”的秘密。“八奇技”是由八人在逃难中悟得的绝技，得技者或传功后身死，或失踪，真相扑朔迷离。',img:"https://cdn.pixabay.com/photo/2016/06/24/23/20/mosque-1478052_960_720.png"},])<slot :list="data2_article" name="article"></slot>

父组件通过在子组件上插槽上设置的参数获取数据，比如#插槽名="params"或者结构之后的数据#插槽名="{数据1，数据2……}"，若为默认插槽就是v-slot="params"。

如图所示，第一次调用子组件是打印出全部数据。

十九 shallowRef&shallowReactive

只对ref对象或reactive对象浅层复制，即ref为.value，reactuve为跟级别。

白话就是获取数据时最高层级的数据是双向绑定的，其余层级没有递给处理。

shallowRef只对.value的访问是响应式，对下一层次数据无效。

shallowReactive只有根级别的属性是响应式的。

便于数据大时提高运行效率。

比如页面数据重新加载，改变的是整体的数据，使用浅层复制效率就高。

适合仅整个对象需要双向绑定，不涉及对象内部修改的场景。

<script setup>
import { shallowRef,shallowReactive }  from 'vue';
let presion = shallowRef({name: 'presion',
});
function changename(){presion.value.name = 'presion_change'
}
function change(){presion.value = {name:"test1",age:11}
}
</script>
<template><p>{{presion}}</p><div><button @click="changename">change name</button>&nbsp;<button @click="change()">change</button></div>
</template>

样例中点击changename无效。

二十 readonly&shallowReadonly

readonly就是只读的意思，只能传入对象，之后传入的对象赋值为新副本，新副本失去双向绑定。

shallowReadonly是readonly的浅层拷贝，即仅影响根目录，新建的副本除了最高层级的数据其他都有双向绑定。

当传递对象的值改变，副本的值也会被改变。

<script setup>
import { readonly, shallowReadonly }  from 'vue';
let user = reactive({name:"test1",age:11,worktype:{lable:"test1",years:"8"}});
let user1 = readonly(user);
let user2 = shallowReadonly(user);
function changeuser(){
user.worktype.years=  "1"
}
function changeuser1(){user1.name="test"
}
function changeuser2name(){user2.name="user2"
}
function changeuser2worktype(){user2.worktype.lable="test2"
}
</script>
<template><p>{{user}}</p><p>{{user1}}</p><p>{{user2}}</p><div><button @click="changeuser">change user</button> &nbsp;<button @click="changeuser1">change user1</button> &nbsp;<button @click="changeuser2name">change user2 name</button> &nbsp;<button @click="changeuser2worktype">change user2 worktype lable</button></div>
</template>

点击 change user1 和change user2 name 会报错

[Vue warn] Set operation on key "name" failed: target is readonly.

未点击change user

点击change user后

因为user1和user2的引用地址还是user对象。