Vue数据传递的五种方法

最新推荐文章于 2025-03-09 10:09:01 发布

weixin_43127263

最新推荐文章于 2025-03-09 10:09:01 发布

阅读量2.5k

点赞数 1

原文链接：https://blog.youkuaiyun.com/localhost_1314/article/details/83657546

版权

组件（Component）是 Vue.js 最强大的功能。组件可以封装可重用的代码，通过传入对象的不同，实现组件的复用，但组件传值就成为一个需要解决的问题。

1.父组件向子组件传值

组件实例的作用域是孤立的。这意味着不能在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。

子组件：
在这里插入图片描述
子组件需要从父组件获取 logo 的值，就需要使用 props: [‘logo’]

父组件：

2.子组件向父组件传值

子组件主要通过事件传递数据给父组件。

子组件：
在这里插入图片描述

其中 transferUser 是一个自定义的事件，this.username 将通过这个事件传递给父组件。

父组件：
在这里插入图片描述

getUser 方法中的参数 msg 就是从子组件传递过来的参数 username

3.路由传值

假设有一个列表页，点击列表项，需要通过id进入到对应的详情页。

列表页：

<div class="list">
  <ul>
    <li v-for="(item, index) in recommendList" :key="index" @click="getDetail(item.id)">
      .....
    </li>
  </ul>
</div>

方法一

getDetail (id) {
//直接调用$router.push 实现携带参数的跳转
  this.$router.push({
    path: `/detail/${id}`,
  })
 }

对应的路由配置

{
   path: '/detail/:id',
   name: 'Detail',
   component: Detaul
 }

获取参数的方法：

this.$route.params.id

方法二：

methods: {
	getDetail (id) {
	  this.$router.push({
	    name: 'Detail', 
	    params: {
	      id: id
	    }
	  })
	}
}

对应的路由配置：

{
     path: '/detail',
     name: 'Detail',
     component: Detail
 }

获取参数的方法：

this.$route.params.id

方法三
通过query来传递参数，这种情况下 query传递的参数会显示在url后面?id=？

methods: {
	getDetail (id) {
	  this.$router.push({
	    path: '/detail', 
	    query: {
	      id: id
	    }
	  })
	}
}

对应的路由配置：

{
     path: '/detail',
     name: 'Detail',
     component: Detail
 }

获取参数的方法：

this.$route.query.id

注：
使用params传值时，页面刷新时参数会消失，使用query时不会出现这个问题
使用时，可以在生命周期created赋值。

4. 通过localStorage或者sessionStorage来存储数据

使用方法：
在这里插入图片描述
区别：
1.sessionStorage：将数据保存在session对象中。所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。