Vue子组件给父组件传值 + 父组件调用子组件方法结合

在开发中经常遇到关于子父组件之间传值和方法调用的问题，因此将上述两种方式结合作为例子记录下来。

功能需求：

通过切换左侧侧边栏（以下简称left），右侧对应显示相关内容（以下简称right）

 实现效果：

实现思路：

将left和right分别封装为自定义组件，left切换时调用change事件，将id值传回父页面，再由父页面调用right中获取列表的方法

代码片段：

left.vue

<template>
  <div class="left-content">
    <ul :class="{nesting: nesting}">
      <li v-for="item in list" :key="item.id" :class="{active: item.id === activeId}" @click="changeTab(item.id)">
        {{item.name}}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'left',
  props: ['nesting'],
  data(){
    return{
      list: [
        {name: '文章', id: 1},
        {name: '海报', id: 2},
        {name: '视频', id: 3},
        {name: '早报', id: 4},
        {name: '素材', id: 5},
        {name: '宣传册', id: 6},
        {name: '文件', id: 7},
      ],
      activeId: 1
    }
  },
  methods: {
    //切换侧边栏
    changeTab(id){
      this.activeId = id
      //将值返回父页面，父页面中@func为自定义方法
      this.$emit('func',this.activeId)
    }
  }

}
</script>
<style lang="scss" scoped>
ul{
  padding: 0;
  margin: 0;
  height: 100vh;
  overflow: auto;
  &.nesting{
    height: calc(100vh - 0.5rem);
  }
  li{
    list-style: none;
    padding: 0.1rem;
    text-align: center;
    font-size: 0.14rem;
    position: relative;
    &:before{
      content: '';
      display: inline-block;
      width: 0.04rem;
      height: 0.16rem;
      border-radius: 0.02rem;
      position: absolute;
      top: 0.1rem;
      left: 0.04rem;
    }
    &.active{
      color: $main;
      &:before{
        background-color: $main;
      }
    }
  }
}
</style>

index.vue

<template>
  <div class="marking">
    <div class="left">
      <left v-bind="$attrs" @func="getContentType"></left>
    </div>
    <div class="right">
      <right v-bind="$attrs" ref="rightDiv"></right>
    </div>
  </div>
</template>
<script>
import left from './module/left'
import right from './module/right'
export default ({
  name: 'Marketing',
    data(){
    return{
      contentType: 1
    }
  },
  methods:{
    getContentType(data){
      this.contentType = data
      this.$refs.rightDiv.parentHandleclick(this.contentType);
    }
  },
  components: {
    left,
    right
  },
  created(){
    
  }
})
</script>
<style lang="scss" scoped>
.marking{
  display: flex;
  .left{
    width: 0.8rem;
    overflow: auto;
    border-right: 0.01rem solid $borderColor;
  }
  .right{
    flex: 1;
    widows: calc(100vh - 0.8rem);
    overflow: auto;
  }
}
</style>

right.vue

<template>
  <div class="right-content">
    <div class="top flex itemsCenter justifyBetween">
      <span class="title">企业文库</span>
      <el-input placeholder="请输入内容" v-model="searchText" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="searchFun"></el-button>
      </el-input>
    </div>
    <div :class="['content-list', {nesting: nesting}]">
      <div class="item" v-for="(item, index) in dataList" :key="index">
        <div class="flex itemsCenter justifyBetween" v-if="item.type === 2">
          <video class="video" preload="auto" controls src="http://account.tanmarket.cn/fdfsServer/group1/M00/1D/49.mp4"></video>
        </div>
        <div class="flex itemsCenter justifyBetween" v-else>
          <img src="" alt="">
          <div class="info">
            <div class="item-title two-line">{{item.contentName}}</div>
            <div class="time">{{item.createTime}}</div>
          </div>
        </div>
        <div class="btns flex itemsCenter justifyBetween">
          <el-button @click="detailPop = true">查看详情</el-button>
          <el-button>分享链接</el-button>
        </div>
      </div>
    </div>
    <detail-pop :detailPop.sync="detailPop"></detail-pop>
  </div>
</template>
<script>
import DetailPop from './DetailPop'
import {getMarketContentList} from '@/api/marketing'
export default {
  name: 'right',
  props: ['nesting'],
  data(){
    return{
      contentType:1,
      siteID: 1,
      dataList:[],
      searchText: '',
      detailPop: false
    }
  },
  components: {
    DetailPop
  },
  created () {
    this.getMarketContentList()
  },
  methods: {
    parentHandleclick(val) {
       //父页面调用子组件方法
      this.contentType = val
      this.getMarketContentList()
    },
    getMarketContentList(){
      getMarketContentList({
        siteID: this.siteID,
        contentType: this.contentType,
        pageNo: 1,
        pageSize: 5,
      }).then(res => {
        this.dataList = res.data.datas
      })
    },
    searchFun(){
    }
  }
}
</script>
<style lang="scss" scoped>
.right-content{
  .top{
    padding: 0.1rem;
    box-shadow: 0 0.03rem 0.03rem $borderColor;
    .el-input{
      width: 1.8rem
    }
  }
  .title{
    display: inline-block;
    padding-right: 0.2rem;
    white-space: nowrap;
  }
}
.content-list{
  height: calc(100vh - 0.5rem);
  overflow: auto;
  padding: 0 0.1rem 0.1rem 0.1rem;
  box-sizing: border-box;
  &.nesting{
    height: calc(100vh - 1rem);
  }
  .item{
    border: 0.01rem solid $borderColor;
    padding: 0.1rem;
    margin-top: 0.1rem;
    border-radius: 0.04rem;
    box-shadow: 0 0 0.05rem $borderColor;
    img{
      width: 0.5rem;
      height: 0.5rem;
      margin-right: 0.1rem;
    }
    .info{
      width: 2rem;
    }
    .item-title{
      font-size: 0.14rem;
    }
    .time{
      margin-top: 0.04rem;
      font-size: 0.12rem;
      color: $gray;
    }
    .btns{
      margin-top: 0.1rem;
    }
  }
  .video{
    background-color: $borderColor;
    border-radius: 0.04rem;
    width: 100%;
    height: 1rem;
    object-fit: contain;
  }
}
</style>