vue学习九

十八 插槽

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对象。