vue父子组件之间相互传值
Posted shanchui
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue父子组件之间相互传值相关的知识，希望对你有一定的参考价值。
1. 子组件使用父组件方法，并向父组件传值
子组件代码
<template> <div class="menu"> <div class="item-group" v-for="(item,index) in menu"> <router-link :to="item.url" tag="div" class="wrap" @click.native="handlerClick(item.txt)"> <!-- .native实现原生事件 --> <div :class="item.icon"></div> <div class="txt">{{item.txt}}</div> </router-link> </div> </div> </template> <script> export default{ name:"Menu", props:{ menu:{ type:Array } }, data(){ return{ show:false } }, methods:{ //子组件使用父组件方法，并向父组件传值 handlerClick(txt){ this.$emit("func",txt) }, } } </script>
父组件代码：
<template> <div class="recommend"> <Menu :menu="nav" @func="show" ></Menu> <Menu :menu="more" style="background-color: #f5f5f5; padding:10px 0px" v-show="state"></Menu> <div class="song-list-area"> <div class="song-group"> <img src="" alt=""> <p>原来那些歌的原曲在这里</p> </div> <div class="song-group"> <img src="" alt=""> <p>原来那些歌的原曲在这里</p> </div> <div class="song-group"> <img src="" alt=""> <p>原来那些歌的原曲在这里</p> </div> <div class="song-group"> <img src="" alt=""> <p>原来那些歌的原曲在这里</p> </div> </div> </div> </template> <script> import Menu from "../comment/menu.vue" export default{ name:"Recommend", data(){ return{ nav:[ {id:0,txt:"乐库",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:1,txt:"猜你喜欢",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:2,txt:"每日推荐",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:3,txt:"排行榜",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:4,txt:"更多",icon:"iconfont icon-aixin_line",hiden:false,url:"/"} ], more:[ {id:0,txt:"音乐相册",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:1,txt:"相亲",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:2,txt:"偶遇",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:3,txt:"音乐速配",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:4,txt:"语音直播",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:5,txt:"探索",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:6,txt:"游戏中心",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:7,txt:"唱片店",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:8,txt:"首唱会",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:9,txt:"铃声彩铃",icon:"iconfont icon-aixin_line",hiden:false,url:"/"} ], state:false } }, components:{ Menu }, mounted() { }, methods:{ show(data){ console.log("data",data) this.nav.forEach((item,index)=>{ if(item.txt==data){ this.state=! this.state } }) }, } } </script>
主要是子组件使用this.$emit("定义父组件方法名称",参数)
父组件就可以使用 @定义父组件方法的名称="方法名"
2.父组件使用子组件方法 ，并向子组件传递数据
子组件代码：
<template> <div class="menu"> <div class="item-group" v-for="(item,index) in menu"> <router-link :to="item.url" tag="div" class="wrap" @click.native="handlerClick"> <!-- .native实现原生事件 --> <div :class="item.icon"></div> <div class="txt">{{item.txt}}</div> </router-link> </div> </div> </template> <script> export default{ name:"Menu", props:{ menu:{ type:Array } }, data(){ return{ show:false } }, methods:{ handlerClick(txt){ console.log(txt) }, // 子组件使用父组件方法，并向父组件传值 // handlerClick(txt){ // this.$emit("func",txt) // }, } } </script>
父组件代码：
<template> <div class="recommend"> <Menu :menu="nav" ref="nav"></Menu> <input type="button" value="点击" @click=handlerClick()> <Menu :menu="more" style="background-color: #f5f5f5; padding:10px 0px" v-show="state"></Menu> <div class="song-list-area"> <div class="song-group"> <img src="" alt=""> <p>原来那些歌的原曲在这里</p> </div> <div class="song-group"> <img src="" alt=""> <p>原来那些歌的原曲在这里</p> </div> <div class="song-group"> <img src="" alt=""> <p>原来那些歌的原曲在这里</p> </div> <div class="song-group"> <img src="" alt=""> <p>原来那些歌的原曲在这里</p> </div> </div> </div> </template> <script> import Menu from "../comment/menu.vue" export default{ name:"Recommend", data(){ return{ nav:[ {id:0,txt:"乐库",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:1,txt:"猜你喜欢",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:2,txt:"每日推荐",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:3,txt:"排行榜",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:4,txt:"更多",icon:"iconfont icon-aixin_line",hiden:false,url:"/"} ], more:[ {id:0,txt:"音乐相册",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:1,txt:"相亲",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:2,txt:"偶遇",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:3,txt:"音乐速配",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:4,txt:"语音直播",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:5,txt:"探索",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:6,txt:"游戏中心",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:7,txt:"唱片店",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:8,txt:"首唱会",icon:"iconfont icon-aixin_line",hiden:false,url:"/"}, {id:9,txt:"铃声彩铃",icon:"iconfont icon-aixin_line",hiden:false,url:"/"} ], state:false } }, components:{ Menu }, mounted() { }, methods:{ handlerClick(){ this.$refs.nav.handlerClick("我是父组件向子组件传递的值") } // show(data){ // console.log("data",data) // this.nav.forEach((item,index)=>{ // if(item.txt==data){ // this.state=! this.state // } // }) // }, } } </script>
主要是在父组件使用的子组件上添加 ref="名称" 在父组件方法中使用this.$refs.名称.子组件方法名称（传递的参数）
子组件定义方法 子组件方法名称(参数){console.log(参数)}
3.父组件向子组件传递数据也可以通过 在子组件中使用props定义传递的数据类型等
在父组件中的子组件使用中绑定数据
以上是关于vue父子组件之间相互传值的主要内容，如果未能解决你的问题，请参考以下文章