正文
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定义传递的数据类型等
在父组件中的子组件使用中绑定数据
