vue父子组件传递参数

Posted xiumumi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue父子组件传递参数相关的知识,希望对你有一定的参考价值。

父向子组件传递

    在父组件里子组件的模板里写上要传递的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中父子组件的参数传递和应用

vue父子组件传值方式

vue之父子组件之间的通信方式

Vue父子组件传值

Vue父子组件通信之$emit(基于vue2.5,ES6)

vue父子传参