vue2知识补充

知识补充"/>

vue2知识补充

1.页面传参及传参之后刷新页面数据丢失

query参数有多层对象时，刷新丢失可以使用JSON.stringify解决

params参数丢失：还没试过怎么解决

    methods: {// query和params区别// query类似 get，跳转之后页面 url后面会拼接参数,类似?id=1，非重要性的可以这样传，密码之类还是用params刷新页面id还在// params类似 post，跳转之后页面 url后面不会拼接参数 ，但是刷新页面id 会消失go(){const data  = {name:'query参数',id:'348783479283023'}// this.$router.push('/route')//直接使用path跳转// this.$router.push({path:'/route'})//使用path跳转// this.$router.push({name:'route',query:data})//使用那么跳转并携带参数this.$router.push({name:'route',query:{data:JSON.stringify(data),//多层的参数用JSON.stringify转一下可以防止刷新后丢失，接收的页面使用JSON.parse转义一下date:'2023-11-02'}})},goParams(){// params传参刷新页面参数会丢失，如果不是一些如密码之类的数据可以使用query，当然丢失问题也有解决办法const data  = {name:'params参数',id:'03490303039423'}// this.$router.push({name:'route',params:data})this.$router.push({name:'route',params:{data:data,date:'2023-11-02'}})}}

2.provide跟inject

二者是用来传递参数的，适用于父组件给后代组件传递参数

传参页面

export default {
provide:{//将现需要传递的参数以对象的形式写在provide里面grandfatherValue:'参数',fun:()=>{console.log('函数参数');}},
// 在使用 Provide 和 Inject 进行依赖注入时，需要注意以下几点：
// Provide 和 Inject 只能在父子组件之间使用。对于兄弟组件之间的数据共享，建议使用 Vuex 等状态管理工具。
// Provide 和 Inject 注入的数据是响应式的。如果提供的数据发生变化，那么所有注入了该数据的组件都会相应地更新。
// Provide 和 Inject 不保证注入顺序。如果多个组件都提供了同一个键名，注入的顺序不确定，可能会导致组件的渲染结果出现意外情况。
// Provide 和 Inject 不限制嵌套层数。在组件树中，Provide 和 Inject 可以一直循环注入，直到找到对应的数据或方法。},

接收参数页面

export default {name: "",inject:['grandfatherValue','fun'],//将需要使用的参数以数组的形式列出来，然后在其他地方就能通过this来使用了//inject:{value:'grandfatherValue'},//也可以是对象写法形式
}

3.vue作用域插槽的使用v-slot:name= "{data}"、slot-scope="{data}"

一般用于动态结构中如elementUI中的表格等等 

 父组件

<template><div class="page">life组件<GrandsonCom><!-- 插槽的写法有很多，以插槽名header为例有：#header、slot="header",v-slot:header,#语法仅适用于template --><!-- 作用域插槽写法一 --><!-- slot是插槽的写法one：是插槽的名字data：是插槽传过来的数据，加个{}包裹是解构的意思 --><template slot="one" slot-scope="{data}"><!-- 解构出来的值只在作用域内生效 -->{{'插槽一' + data}}</template><!-- 作用域插槽写法二 --><!-- v-slot是插槽的固定语法冒号后面的two是插槽的名字data：是插槽传过来的数据 --><template v-slot:two="{data}">{{'插槽二'+data}}</template><template v-slot:three="{data}">{{'插槽三'+data}}</template><template v-slot:four="{data}">{{'插槽四'+data}}</template></GrandsonCom></div>
</template>

 子组件

<template><div class="page"><div v-for="(item,index) in list" :key="index" class="box"><slot :name="item.slot" :data="item.name"></slot></div></div>
</template>
<script>
export default {name: "",data() {return {list:[{name:'路飞',id:'232434',slot:'one'},{name:'索隆',id:'458845',slot:'two'},{name:'娜美',id:'798989',slot:'three'},{name:'乌索普',id:'987789',slot:'four'},]};},
};
</script>