码迷,mamicode.com
首页 > 其他好文 > 详细

vue父子组件传递参数

时间:2018-11-12 11:37:49      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:导航   vue   接收   his   接收参数   router   mes   地址   val   

父向子组件传递

    在父组件里子组件的模板里写上要传递的key和value  

    <child  key=‘value‘></child> 或者 <child  :key=‘value‘></child>    如果是通过冒号绑定, value需要先在data里定义

    子组件内添加props:[‘key‘] 进行接收    props与data同级

 

子向父传递

    子组件的方法内通过 this.$emit(‘name‘,value);进行传值

    父组件通过@name=fn进行接收      <child  @key=‘fn‘></child>    fn(msg) 函数里的msg就是子组件传递过来的数据 

 

路由传参

    <router-link :to="{name:‘hello‘,params:{mes:message}}">页面1</router-link>     //hello为路由的name

    编程式导航 使用  this.$router.push({name:‘hello‘,params:{mes:this.message}})

    接收参数使用 this.$route.params.message

          query形式  参数会显示在地址栏 用法相同,将params改为query

 

vue父子组件传递参数

标签:导航   vue   接收   his   接收参数   router   mes   地址   val   

原文地址:https://www.cnblogs.com/xiumumi/p/9944498.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!