前端vue 跨组件传参,cokies,axion

路由跳转

this.$router.push(‘/course‘);

this.$router.push({name: course});

this.$router.go(-1);

this.$router.go(1);

<router-link to="/course">课程页</router-link>

<router-link :to="{name: ‘course‘}">课程页</router-link>

路由传参

第一种

router.js

routes: [

// ...

{

path: ‘/course/:id/detail‘,

name: ‘course-detail‘,

component: CourseDetail

},

]　

跳转.vue

<template>

<router-link :to="`/course/${course.id}/detail`">{{ course.name }}</router-link>

</template>

<script>

// ...

goDetail() {

// 逻辑跳转

this.$router.push(`/course/${this.course.id}/detail`);

}

</script>

接收.vue

created() {

let id = this.$route.params.id;

}

第二种

router.js

routes: [

// ...

{

path: ‘/course/detail‘,

name: ‘course-detail‘,

component: CourseDetail

},

]

跳转.vue

<template>

<router-link :to="{

name: ‘course-detail‘,

query: {id: course.id}

}">{{ course.name }}</router-link>

</template>

<script>

// ...

goDetail() {

// 逻辑跳转

this.$router.push({

name: ‘course-detail‘,

query: {

id: this.course.id

}

});

}

</script>

接收.vue

created() {

let id = this.$route.query.id;

}

可以完成跨组件传参的四种方式

// 1) localStorage：永久存储数据

// 2) sessionStorage：临时存储数据(刷新页面数据不重置，关闭再重新开启标签页数据重置)

// 3) cookie：临时或永久存储数据(由过期时间决定)

// 4) vuex的仓库(store.js)：临时存储数据(刷新页面数据重置)

vuex仓库插件

store.js配置文件

export default new Vuex.Store({

state: {

title: ‘默认值‘

},

mutations: {

// mutations 为 state 中的属性提供setter方法

// setter方法名随意，但是参数列表固定两个：state, newValue

setTitle(state, newValue) {

state.title = newValue;

}

},

actions: {}

})

在任意组件中给仓库变量赋值

1 2	`this.$store.state.title` `=` `‘newTitle‘` `this.$store.commit(‘setTitle‘,` `‘newTitle‘)`

在任意组件中取仓库变量的值

1	`console.log(this.$store.state.title)`

vue-cookie插件

安装

1	`>: cnpm install vue-cookies`

main.js 配置

// 第一种

import cookies from ‘vue-cookies‘ // 导入插件

Vue.use(cookies); // 加载插件

new Vue({

// ...

cookies, // 配置使用插件原型 $cookies

}).$mount(‘#app‘);

?

// 第二种

import cookies from ‘vue-cookies‘ // 导入插件

Vue.prototype.$cookies = cookies; // 直接配置插件原型 $cookies　

使用

// 增(改): key，value，exp(过期时间)

// 1 = ‘1s‘ | ‘1m‘ | ‘1h‘ | ‘1d‘

this.$cookies.set(‘token‘, token, ‘1y‘);

?

// 查：key

this.token = this.$cookies.get(‘token‘);

?

// 删：key

this.$cookies.remove(‘token‘);　

注：cookie一般都是用来存储token的

// 1) 什么是token：安全认证的字符串

// 2) 谁产生的：后台产生

// 3) 谁来存储：后台存储（session表、文件、内存缓存），前台存储（cookie）

// 4) 如何使用：服务器先生成反馈给前台(登陆认证过程)，前台提交给后台完成认证(需要登录后的请求)

// 5) 前后台分离项目：后台生成token，返回给前台 => 前台自己存储，发送携带token请求 => 后台完成token校验 => 后台得到登陆用户

axios插件

安装

1	`>: cnpm install axios`

main.js配置

1 2	`import` `axios` `from` `‘axios‘` `//` `导入插件` `Vue.prototype.$axios` `=` `axios;` `//` `直接配置插件原型 $axios`

使用

this.axios({

url: ‘请求接口‘,

method: ‘get|post请求‘,

data: {post等提交的数据},

params: {get提交的数据}

}).then(请求成功的回调函数).catch(请求失败的回调函数)　

案例

// get请求

this.$axios({

url: ‘http://127.0.0.1:8000/test/ajax/‘,

method: ‘get‘,

params: {

username: this.username

}

}).then(function (response) {

console.log(response)

}).catch(function (error) {

console.log(error)

});

?

// post请求

this.$axios({

url: ‘http://127.0.0.1:8000/test/ajax/‘,

method: ‘post‘,

data: {

username: this.username

}

}).then(function (response) {

console.log(response)

}).catch(function (error) {

console.log(error)

});

跨域问题（同源策略）

// 后台接收到前台的请求，可以接收前台数据与请求信息，发现请求的信息不是自身服务器发来的请求，拒绝响应数据，这种情况称之为 - 跨域问题（同源策略 CORS）

?

// 导致跨域情况有三种

// 1) 端口不一致

// 2) IP不一致

// 3) 协议不一致

?

// Django如何解决 - django-cors-headers模块

// 1) 安装：pip3 install django-cors-headers

// 2) 注册：

INSTALLED_APPS = [

...

‘corsheaders‘

]

// 3) 设置中间件：

MIDDLEWARE = [

...

‘corsheaders.middleware.CorsMiddleware‘

]

// 4) 设置跨域：

CORS_ORIGIN_ALLOW_ALL = True

element-ui插件

安装

1	`>: cnpm i element-ui` `-S`

main.js配置

import ElementUI from ‘element-ui‘;

import ‘element-ui/lib/theme-chalk/index.css‘;

Vue.use(ElementUI);　

使用

1	`依照官网 https://element.eleme.cn/#/zh-CN/component/installation api`

原文地址：https://www.cnblogs.com/yangxinpython/p/11764070.html

时间： 2024-08-03 07:51:39

前端vue 跨组件传参,cokies,axion的相关文章

跨组件传参，cookies组件，axios组件

路由跳转 this.$router.push('/course'); this.$router.push({name: course}); this.$router.go(-1); this.$router.go(1); <router-link to="/course">课程页</router-link> <router-link :to="{name: 'course'}">课程页</router-link> 路由

vue 父子组件传参

父向子组件传参例子:App.vue为父,引入componetA组件之后,则可以在template中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与componentA对于它来说是一样的,不好区分,所以使用小写-小写这种写法).而子组件componetA中,声明props参数'msgfromfa'之后,就可以收到父向子组件传的参数了.例子中将msgfromfa显示在<p>标签中.App.vue中 1 1<component-a ms

Vue 子组件向父组件传参

直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"><

vue组件传参

一.父子组件的定义负值组件的定义有两种,我称为常规父子组件和特殊父子组件. 1.1.常规父子组件将其他组件以import引入用自定义标签接收,在当前组件中component里注册该标签,页面上可以直接用<自定义标签></自定义标签>样子使用.当前组件为父组件,被引入的组件为子组件. 引入子组件注册子组件使用子组件 1.2.特殊父子组件在路由中定义好组件,组件中含有children,页面上通过<router-view></router-view>形式

从 Vue 的视角学 React（四）—— 组件传参

组件化开发的时候,参数传递是非常关键的环节哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚但实现这些交互的基础,是明白组件之间参数传递的方式,和各自的优缺点一.父组件传参到子组件和 Vue 一样,React 中从父组件到子组件的传参也是通过 props 不过在 Vue 项目中,需要在先组件里定义将要接收的 props,而 React 可以直接获取而且 props 不光可以接收 Number.String 等基本类型,还可以接收 Fu

第八篇：Vue组件传参

组件传参父传子 1)在子组件内部通过props设置组件的自定义属性 props: ['abc', 'goods'] 2)在父组件渲染子组件是对自定义属性赋值即可 <GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/> 示例代码: 子组件示例代码 <template> <div class="goods-box">

1218 组件分类,组件传参

目录昨日内容组件 1.概念 2.组件分类特点根组件局部组件全局组件 3.组件传参父传子子传父作业 Vue项目环境的搭建 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 Vue基础总结昨日内容 """ 1.表单指令: v-model="变量" 变量与value有关普通:变量就代表value值单选框:变量为多个单选框

组件传参

一.两个平行组件传参新建bus.js import Vue from 'vue' export var bus = new Vue() App.vue里created方法里定义事件 import { bus } from 'bus.js' // ... created () { bus.$on('tip', (text) => { alert(text) }) } Test.vue组件内调用 import { bus } from 'bus.js' // ... bus.$emit('tip'

vue-父子组件传参以及无限级评论

vue父子组件的使用 <template> <div> <zi :data="data" /> </div> </template> <script> import zi from './zi' import axios from 'axios' export default { name:"fuzujian", data() { return { data:'' } }, components