Vue的传参方式总结

Vue的传参方式总结

一、组件间传参

a.父给子传参
父传递参数
子组件 export default{ props:[‘name’,’age’],
//或者规定的写法 props:{name:{type:String},age:{type:Number}}
}
b.子给父传参

 子组件父组件 
export default{methods:{
sayHi(msg){ console.log(msg) }  } }
         流程解析:(1)子组件中,点击按钮,$emit(事件名,参数) 触发show时间绑定的方法,传入参数(2)show方法在父组件中定义,@show=“sayHi”,子的show方法绑定了父的sayHi(3)子中的参数通过show事件绑定的sayHi方法传入父中

c.兄弟间传参(用Vuex 代替)
通过给eventbus注册事件,别的组件触发事件,实现通信。
①创建一个eventbus对象,即创造一个vue对象,用作传递信息。
②接收信息的一方将事件通过vm.$on(“事件名”,事件处理函数)添加在eventbus对象上。
③发送数据的一方,通过vm.$emit(“事件名”,传递的数据)触发事件,将数据传递。

步骤:
(1)向vue的原型中,注入一个专门监听事件的vue实例
vue.prototype.EventBus=new vue();
(2) A组件中注册,引入EventBus.js模块,并向其中注册事件
this.EventBus.emit(‘change’,msg)(3)B组件中注册change事件的监听this.EventBus.emit(‘change’,msg) (3) B组件中注册change事件的监听 this.EventBus.emit(change,msg)(3)Bchangethis.EventBus.on(‘change’,changeMsg(msg))
methods:{changeMsg(msg){//此处就能收到msg,A组件传入的}}

二、路由传参

a.通过params
需要在router的path后跟上参数

  { path: "/two/:id/:data",name: "two",component: two }

跳转时:

this.$router.push({path: `/two/${this.message}/456`  // 直接把数据拼接在path后面 })

接收时:

 this.$route.params 

b.通过query
跳转时

 this.$router.push({path: `/two`,query: { id: this.message, data: 456 }  });  / /two?id=mess&data=456 // 本质是?形式的连接 

接收时 :

  this.$route.query

总结:params 和 query 都是传递参数的,params不会在url上面出现,并且params参数是路由的一部分,是一定要存在的 , query是我们通常看到的url后面的跟在?后面的显示参数

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright www.122dh.com Rights Reserved.