-
vue 组件之间函数传递_vue-router组件间参数相互传递的方法
2021-01-14 04:56:52这次给大家带来vue-router组件间参数相互传递的方法,vue-router组件参数相互传递的注意事项有哪些,下面就是实战案例,一起来看一下。通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下login ---用户名...这次给大家带来vue-router组件间参数相互传递的方法,vue-router组件参数相互传递的注意事项有哪些,下面就是实战案例,一起来看一下。
通过VueRouter来实现组件之间的跳转:参数的传递,具体内容如下
login ---用户名--->main
①明确发送方和接收方
②配置接收方的路由地址
{path:'/myTest',component:TestComponent}
-->
{path:'/myTest/:id',component:TestComponent}
③接收方获取传递来的数据
this.$route.params.id
④跳转的时候,发送参数
this.$router.push('/myTest/20')
跳转
代码:
传参{{msg}}
//创建主页面组件
var myMain = Vue.component("main-component",{
//保存登录传递过来的数据
data:function(){
return {
uName:''
}
},
template:`
主页面用户名:{{uName}}
`,
//挂载该组件时自动拿到数据
beforeMount:function(){
//接收参数
console.log(this.$route.params);
this.uName = this.$route.params.myName ;
}
})
//创建登录页面组件
var myLogin = Vue.component("login-component",{
//保存用户输入的数据
data:function(){
return {
userInput:""
}
},
methods:{
toMain:function(){
//跳转到主页面,并将用户输入的名字发送过去
this.$router.push("/main/"+this.userInput);
console.log(this.userInput);
}
},
template:`
登录页面
登录到主页面
登录到主页面
`
})
var NotFound = Vue.component("not-found",{
template:`
404 Page Not Found
返回登录页
`
})
//配置路由词典
const myRoutes = [
{path:"",component:myLogin},
{path:"/login",component:myLogin},
//注意冒号,不用/否则会当成地址
{path:"/main/:myName",component:myMain},
//没有匹配到任何页面则跳转到notfound页面
{path:"*",component:NotFound}
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
// 注意,路由地址
传参练习{{msg}}
//创建产品列表组件
var myList = Vue.component("product-list",{
//保存产品列表的数据
data:function(){
return{
productList:["苹果","华为","三星","小米","vivo"]
}
},
template:`
这是列表页
//将index传递过去
{{tmp}}
`
})
//详情页组件
var myDetail = Vue.component("product-detail",{
//保存传递过来的index
data:function(){
return{
myIndex:""
}
},
//在挂载完成后,将接收到的index赋值给myIndex
mounted:function(){
this.myIndex = this.$route.params.id;
},
template:`
这是详情页
这是id为:{{myIndex}}的产品
`
})
//页面找不到的时候
var NotFound = Vue.component("not-found",{
template:`
404 Page Not Found
`
})
// 配置路由词典
const myRoutes = [
{path:"",component:myList},
{path:"/list",component:myList},
{path:"/detail/:id",component:myDetail},
{path:"*",component:NotFound},
]
const myRouter = new VueRouter({
routes:myRoutes
})
new Vue({
router:myRouter,
el:"#container",
data:{
msg:"Hello VueJs"
}
})
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
-
Vue组件间的参数传递
2020-04-30 22:11:57Vue组件间的参数传递 1、父组件与子组件传值 父组件传给子组件:子组件通过props方法接受数据; 子组件传给父组件: $emit 方法传递参数 2、非父子组件间的数据传递,兄弟组件传值 eventBus,就是创建一个事件...Vue组件间的参数传递
1、父组件与子组件传值- 父组件传给子组件:子组件通过
props
方法接受数据; - 子组件传给父组件:
$emit
方法传递参数
2、非父子组件间的数据传递,兄弟组件传值
eventBus
,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适(虽然也有不少人推荐直接用VUEX,具体来说看需求咯。技术只是手段,目的达到才是王道)。
- 父组件传给子组件:子组件通过
-
vue组件穿方法_vue组件间传递参数的几种方式
2020-12-23 05:28:45组件间传递参数的几种方式父组件向子组件传递// 父组件import CenterTemplate from '../../components/admin/userCenterTemplate'export default {components: {'center-template': CenterTemplate},data () {return...组件间传递参数的几种方式
父组件向子组件传递
// 父组件
import CenterTemplate from '../../components/admin/userCenterTemplate'
export default {
components: {
'center-template': CenterTemplate
},
data () {
return {
userinfo: {name: 'jack'}
}
},
}
// 子组件
export default {
props: {
// 接收
form: {
type: Object,
default: {
name: '',
}
}
},
}
子元素调用父元素的方法
直接在子元素中调用父元素的方法
// 子元素
changeInput(){
// 子元素调用父元素的方法1
if(this.$parent.nullSerarchResult){
// 新增标签
this.$parent.nullSerarchResult()
}
},
// 父元素
nullSerarchResult(val){
this.pageNum = 1
this.init({
searchKey: val
})
},
在子元素中使用$emit调用父元素的方法
// 子元素
新增
addNewFun(){
// 第三种方式是发布给父元素
this.$emit('addTagFun')
}
// 父元素
@addTagFun='addTagFun'
>
addTagFun(){
this.$router.push('/admin/add_blog')
},
在子元素中绑定父元素的方法名
// 子元素
搜索
props: {
searchResult: {
type: Function,
default: null
}
},
searchResultChild(){
// 调用方法2,这种需要再props中声明
if(this.searchResult){
this.searchResult(this.serachValue)
}
},
// 父元素
:searchResult='searchResult'
>
searchResult(val){
this.pageNum = 1
this.init({
searchKey: val
})
},
使用event bus来实现组件间的通讯
// common/bus.js
import Vue from 'vue';
// 使用 Event Bus
const bus = new Vue();
export default bus;
// 组件1(接收通知信号)
import bus from '@/common/bus.js'
export default{
data(){
return {
collapseData: ''
}
},
created() {
// 监听collapse,有变动就会收到通知,并改变collapseData值
bus.$on('collapse', msg => {
this.collapseData = msg
})
}
}
// 组件2 发布信号
import bus from '@/common/bus.js'
export default {
methods: {
sendData(){
// 发布信号,触发这个函数,其他的接收函数都会收到相应的信息
bus.$emit('collapse', '信息')
}
}
}
还有一种就是借用vuex传递信息
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
userinfo: {},
},
mutations: {
'SET_ROLES':(state,userinfo) => {
state.userinfo = userinfo
},
},
actions: {
getUser({commit, state},userinfo){
commit('SET_ROLES',userinfo)
},
}
})
export default store
// views/slider.vue
import { mapState, mapAcions } from 'vuex'
export default{
computed: {
// 解构赋值
...mapState({
userinfo: state => state.userinfo
})
},
methods: {
...mapActions({
getUser: 'getUser'
}),
handleUserInfo(){
// 调用
this.$store.dispatch('getUser','对象')
}
}
}
-
vue页面间参数传递的方法总结
2018-11-20 21:20:53方法二:通过设置 Session Storage/local Storage缓存的形式进行传递 1、 原生用法使用 2、 对Session Storage/local Storage缓存进行统一封装 方法三:父子组件之间的传值(通过props属性) 1、父组件给子组件...目录
方法二:通过设置 Session Storage/local Storage缓存的形式进行传递
2、 对Session Storage/local Storage缓存进行统一封装
方法一:通过路由带参数进行传值
需求:两个页面A,B,页面A传递参数值phase给页面B.
做法:
1)页面A附加参数://更新地址栏里面的信息哦
router.push({path: "/iteration/track", query: {...this.$route.query, phase: this.phase}})
PS: this.$router.push({ path: '/iteration/track', query: {...this.$route.query, phase: this.phase} }) // 跳转到B
2) 页面B获取地址栏中的参数;
this.$route.query.project_id
方法二:通过设置 Session Storage/local Storage缓存的形式进行传递
想了解更多有关sessionStorage/localStorage,请移步:
https://blog.csdn.net/huazhongkejidaxuezpp/article/details/50283081
https://blog.csdn.net/huazhongkejidaxuezpp/article/details/84308916
1、 原生用法使用
window.localStorage['aaa']='一个例子啊' console.log(window.localStorage.getItem('aaa')) window.localStorage.setItem('test1',[1,2,3,4,5,6]) window.localStorage.setItem('test2',{userId:'iiiiii',token:7788777}) window.localStorage.setItem('test3','dfdfdf') console.log(window.localStorage.getItem('test1')) console.log(window.localStorage.getItem('test2')) console.log(window.localStorage.getItem('test3')) window.sessionStorage.setItem('test1',[1,2,3,4,5,6]) window.sessionStorage.setItem('test2',{userId:'iiiiii',token:7788777}) window.sessionStorage.setItem('test3','dfdfdf') console.log(window.sessionStorage.getItem('test1')) console.log(window.sessionStorage.getItem('test2')) console.log(window.sessionStorage.getItem('test3'))
缺点:
1)到处直接使用localstorage['aaa']='xxx'这些原生语法实现,这样耦合度太高了,假如有一天需要换实现方式,或者对存储大小做一些控制,那么需要修改的代码就会很多
2)起的key的名字难免会重复,而且这样也会造成全局污染
3) 因为localstorage的使用不规范,所以造成了存储空间的浪费和不够用
解决:
封装storage的使用方法,统一处理
规范storage的key值的命名规则
规范storage的使用规范
2、 对Session Storage/local Storage缓存进行统一封装
import localstorage from '@src/util/localstorage'; import sessionstorage from '@src/util/sessionstorage'; import storage from '@src/util/storage'; storage.storage('l','djjdjjd','jwejjwjejw',1); storage.storage('s','djjdjjd','jwejjwjejw',1); let a = storage.storage('l','djjdjjd',undefined,null); console.log(a)
例如:页面A,B
页面A中设置:storage.set('s','djjdjjd','jwejjwjejw',1);
页面B中获取:storage.get('s')
ps:Session Storage(程序退出销毁) 和 Local Storage(长期保存)
localStorage存数的数据是不能跨浏览器共用的,一个浏览器只能读取各自浏览器的数据,储存空间5M
方法三:父子组件之间的传值(通过props属性)
1、父组件给子组件传值
父组件核心代码:
ps: SubmitTest 为子组件名称
<SubmitTest :iteration_id='this.iteration_id'/>
子组件核心代码:
props: { iteration_id: { type: String }
2、子组件给父组件传值(通过emit事件)
具体参考:https://www.cnblogs.com/LoveAndPeace/p/7273648.html
方法四:不同组件之间传值,通过eventBus
场景:小项目,页面量较少的情况下使用
使用前可以在全局定义一个eventBus window.eventBus = new Vue(); 在需要传递参数的组件中,定义一个emit发送需要传递的值,键名可以自己定义(可以为对象) eventBus.$emit('eventBusName', id); 在需要接受参数的组件重,用on接受该值(或对象) //val即为传递过来的值<br>eventBus.$on('eventBusName', function(val) {<br> console.log(val)<br>}) 最后记住要在beforeDestroy()中关闭这个eventBus eventBus.$off('eventBusName');
方法五:vuex进行传值
场景:vuex主要是是做数据交互,适用于大项目,页面量较多的业务
解决难题:父子组件传值可以很容易办到,但是兄弟组件间传值(兄弟组件下又有父子组件),或者大型spa单页面框架项目,页面多并且一层嵌套一层的传值,异常麻烦,用vuex来维护共有的状态或数据会显得得心应手
例子: 两个组件A和B,vuex维护的公共数据是地理位置,现在A和B页面显示的是相同的地理位置。 需求想实现:如果A修改了地理位置,则B页面的显示随之修改,反之B修改同理。这就是vuex维护公共状态或数据的魅力,在一个地方修改了数据,在这个项目的其他页面都会变成这个数据。
vuex了解:
参考
https://blog.csdn.net/qq_35430000/article/details/79291287
https://www.cnblogs.com/ygtq-island/p/6728137.html
https://www.cnblogs.com/LoveAndPeace/p/7273648.html
-
Vue组件间的参数传递?
2020-03-27 14:32:19答: 1.父组件与子组件传值 父组件传给子组件:子组件...2.非父子组件间的数据传递,兄弟组件传值 eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。 ... -
vue组件间的数据和方法传递
2018-06-19 10:27:002.子组件调用父组件:emit(this.$emit(调用的方法名,传递的参数)) 数据 1.父组件传给子组件:props 2.子组件传给父组件:emit 共享采用vuex 其他可用导入(import) 转载于:... -
vue-router实现组件间的跳转(参数传递)
2020-08-28 22:27:01主要为大家详细介绍了vue-router实现组件间的跳转,参数传递方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 -
vue 子页面调用父页面的参数_Vue子父组件间的数据传递
2020-12-22 20:26:56Vue组件间的作用域是独立的,不能相互之间调用数据,需要通过特定的方法进行数据的传递。一、父组件往子组件传递数据1、使用 Prop 传递数据组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接... -
唯心主义蠢货的[vue学习] vue实现组件间通信的方法
2020-02-04 16:06:45vue实现组件间通信的方法 1. props + $emit 这是我们最常用到的方法,props是单向数据流,通过父组件向子组件传递数据可以使用props,但是如果子组件子元素向父元素传参的话,则需要this.$emit(‘methodName’,... -
Vue组件间的通信案例
2020-09-17 11:40:28Vue组件间的通信案例一:前提说明二: 需求说明三:需要用的知识点(懂的可以跳过)3.1 属性绑定案例一:案例二:3.2 组件调用页面方法案例:四:关键代码展示4.1 组件 B:4.2 页面 A:五: 页面引入组件的流程... -
vue 组件间的传值
2020-10-27 22:15:29利用 子组件 中的 $meit 属性,注册事件,然后在 父组件 中,使用 $meit 定义的方法,在 父组件 中绑定事件;我们触发 子组件 的绑定 $meit 事件,就会 触发 父组件中的数据; 如果,再利用 $meit 的第二个属性,... -
vue里使用EventBus解决兄弟组件间的传递信息
2019-10-27 20:04:15②在需要的调用其他组件的页面: EventBus.$emit ( '自定义函数', 传参 ); ③被调用的页面: EventBus.$on ( '自定义函数', (接收参数) => { 执行你需要执行方法 } ④总结 EventBus的使用场景像是... -
Vue组件间的传值——父子组件、非父子组件、组件跳转传值
2019-05-09 17:45:49一、父子组件之间的传值( props down, events up ) (1)父组件到子组件(通过props) 父组件:(在注册声明的子组件上加 :xxx 表示要传递...-- 要传递的参数和方法, 静态prop值直接添加占位符(name(数字除外,... -
vue 父组件和子组件间传值的方法
2019-02-12 18:14:561.通过属性传值 定义:xxx 然后在子组件中...2.传递方法 (可通过在子组件中反馈参数 实现 子组件向父组件返值处理) 3.传递一整实例 :xxx=“this” 子组件中 获取 时用 this.xxx.想要获取的属性和数值或者方法 ... -
Vue组件间通信的6种方式
2020-07-02 16:22:06子组件通过 props接收父级传递的参数,通过$emit触发父级方法,传递参数 子组件: <input type="text" :value="title"> <button @click="addList">添加</button> ... props: ['title'], ... ... -
Vue组件间的通信——子传父
2020-04-17 00:39:38即子组件通过在自身的事件执行方法中使用this.$emit('自定义事件名称',需要传递的内容),这个方法,在组件使用时监听自定义事件,从而在父组件中处理自定义事件的带参数的执行方法来进行信息传递。 通信步骤: (1)子... -
vue用公共组件页面传值_vue 组件间传值(个人精编)
2020-12-24 18:33:41子组件标签绑定需要传递的参数名2⃣️.子组件页面使用props 接收参数2.子组件向父组件传值1⃣️.子组件使用$emit来触发一个自定义事件,并传递一个参数2⃣️.父组件中的子标签中监听该自定义事件并添加一个响应该... -
vue父组件调用子组件方法this 指向问题_前端面试准备笔记系列之vue(03)
2021-01-26 09:02:42vue组件间的参数传递02. vue子组件调用父组件方法,父组件调用子组件方法03. 兄弟组件之间如何通讯?自定义事件正文01. vue组件间的参数传递父子组件传值父-》子 通过props子组件接收什么参数是有规则的,既可以是... -
vue非父子组件间的传值
2021-01-08 14:37:45vue非父子组件传值的基本语法 创建一个新的vue对象 var newvue = new Vue() 触发事件 newvue.$emit('自定义事件名', 参数) 监听事件 newvue.on('自定义事件名', 触发方法名) 销毁事件 newvue.off('自定义事件名')... -
Vue组件间通信 - 非常全面
2020-08-24 23:20:38父组件:子组件使用$emit()向外传递自定义事件,父组件通过v-on(@是简写)监听,可以使用$event接收参数,也可通过定义一个method接收参数 这应该是项目中最常用的方法,不多说了吧。 父组件代码如下: <... -
深入理解Vue组件二——父子组件间的传值
2019-02-09 15:28:191.父组件向子组件传值 父组件中使用:conut=“1”传递给子组件,子组件中使用props接收count 父组件可以随意的向子组件传值,...子组件在方法中向外触发一个inc事件,并携带一个参数,父组件接收子组件的inc事件... -
vue中组件间的通信
2018-11-21 21:19:55组件间的关系可分为父子组件通信、兄弟组件通信、跨级组件通信。 父组件向子组件传递数据 子组件向父组件传递数据 ... $emit()方法的第一个参数是自定义事件的名称,后面的参数是要传递的数据,可以不写,或... -
vue父子组件间的传值
2019-05-23 12:53:26子组件向父组件传值,父组件将带参方法传递给子组件@func='param',在子组件里触发该方法并带上参数this.$emit('func',this.childmsg) <!--+++++++++++++++++++++++++++父组件++++++++++... -
Vue 多个平行页面间传值,非组件间传递,简单易懂
2020-06-05 19:00:33A页面和B页面是两个平行页面,非父子组件关系,先要将A页面的参数传递到B页面中。 ⚠️注意 :query 中的参数 params ,需要使用JSON.stringify({}) 方法,把对象转化成JSON字符串 A.vue 页面 <el-button ... -
Vue兄弟组件间传值比较方便的一种
2020-07-15 11:03:43vue.js 兄弟组件间传值 1、兄弟之间传递数据可以借助事件车,通过事件的方式传递数据 2、创建一个Vue的实例,让各个兄弟共用同一个事件机制。 3、传递数据方,通过一个事件触发Bus.emit(方法名,传递的数据)。4、... -
Vue实现兄弟组件间的联动效果
2021-01-21 11:13:03需求说明 ... Do it ...在js中编写这个事件的方法 打开页面,可以看到没有问题,city页面监听到了字母表页面的点击 <3>city父页面把字母表页面的请求转发给list页面 首先我们要在city页面定义一个letter
-
2021年 系统架构设计师 系列课
-
零基础一小时极简以太坊智能合约开发环境搭建并开发部署
-
使用vue搭建微信H5公众号项目
-
生益电子首次公开发行股票并在科创板上市招股说明书.pdf
-
嵘泰股份首次公开发行股票招股说明书.pdf
-
美迪凯首次公开发行股票并在科创板上市招股说明书.pdf
-
微软Exchange多个高危漏洞通告
-
MySQL 事务和锁
-
PPT大神之路高清教程
-
【论文写作】毕业论文降重技巧
-
2014年重庆理工大学《数据结构》两套期末考试试卷.pdf
-
【爱码农】C#制作MDI文本编辑器
-
基于java实现的c++动态链接库调用案例
-
【毕设】jsp+基于JB的人事管理系统(源代码+论文)
-
投标方法论
-
Windows系统管理
-
2014年重庆理工大学《计算机网络安全》期末考试试卷.pdf
-
IFIX简单历史报警显示功能.docx
-
呆逼萌新的课题要求.txt
-
Java Scanner的进阶使用 -04天 学习笔记