前端、vue、传参

最新推荐文章于 2023-09-12 10:03:02 发布

原创

最新推荐文章于 2023-09-12 10:03:02 发布 · 560 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了Vue中各种传参方式，包括父组件给子组件、子组件给父组件传参，以及通过路由、axios和vuex传递参数。讨论了`$emit`、`router-link`、`this.$router.push`、axios获取JSON数据以及vuex状态管理的用法，为理解和应用Vue组件间通信提供帮助。

Vue几种常见的传参方式

父组件给子组件传参

       1、在父组件中自定义占位符：
       <v-header :变量名:"父组件参数" :msg:'hello'></v-header> //'header'是自定义的名字
        2、在子组件中定义props属性接收父组件传递过来的数据：
        props:['变量名','msg'] //props与data同级

子组件给父组件传参

1、在子组件methods中定义方法：
方法名(){this.$emit(‘事件名’,参数)}
2、在占位符中 @事件名=‘方法名’：
<v-header @send=“get”></ v-header>//此处方法名后不带括号
3、在父组件methods中定义方法进行数据接收：
方法名(n){this.父组件参数=n}

路由传参

router-link传参

1、< router-link :to="{ path: ‘路径’, query: {变量名: ‘hello’}}">页面跳转</ router-link> //可以传数组
2. 跳转后的页面用 “this.$ route.query.变量名” 接收数据
//此方法不推荐使用，刷新会丢失数组的数据，一般用来传接口。可用通过以下方法暂存数组数据
mounted() {
//mounted与data同级，放在跳转后的页面
if (typeof this.$route.query.songs[0] != “string”) {
localStorage.a = JSON.stringify(this. $route.query.数组名);
} else {
this.参数 = JSON.