vue父子组件之间相互传值

时间：2020-05-15 11:44:05 阅读：56 评论：0 收藏：0 [点我收藏+]

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父子组件之间相互传值

标签：类型探索代码 return button 语音 end 名称定义

原文地址：https://www.cnblogs.com/shanchui/p/12893645.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行