vue父子组件传递参数

Posted 2021-01-19 xiumumi

父向子组件传递

　　　　在父组件里子组件的模板里写上要传递的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