vue2知识补充

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

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

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

javascript 复制代码
    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

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

传参页面

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

接收参数页面

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

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

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

父组件

html 复制代码
<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>

子组件

html 复制代码
<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>
相关推荐
Shi_haoliu13 小时前
Vue2 + Office Add-in关于用vue项目于加载项控制excel单元格内容(Demo版)
前端·javascript·vue.js·node.js·html·excel·office
计算机毕业设计木哥13 小时前
计算机毕业设计选题推荐:基于SpringBoot和Vue的爱心公益网站
java·开发语言·vue.js·spring boot·后端·课程设计
IT_陈寒14 小时前
Redis 性能翻倍的 5 个隐藏技巧,99% 的开发者都不知道第3点!
前端·人工智能·后端
街尾杂货店&14 小时前
css word属性
前端·css
fruge16 小时前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
aesthetician17 小时前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
知识分享小能手20 小时前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng21 小时前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科21 小时前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君201621 小时前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构