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>