父传子与插槽的用法

目录

 父传子

具名插槽

子组件接收数据时的格式

---

• 复用组件时，把功能组件抽离出去后，会有父组件往功能组件传数据的需求，最常用的是父传子 props 和插槽 slot
• 如果传递的数据比较简单，比如只有文字，那么使用父传子即可
• 如果传递的数据比较复杂，有图片等，那么用插槽比较合适

 父传子

子组件/功能组件

    <div class="home-panel">
        <div class="container">
          <div class="head">
            <h3>{{title}}<small>{{subTitle}}</small></h3>
            <el-cascader :options="options" :show-all-levels="false"></el-cascader>
          </div>
        </div>
      </div>

    <swiper-slide
      v-for="item in modelList"
      :key="item.boothId"
      @click.native="clickModel(item.boothId)"
    >

......

export default {
  data() {
      return {
        options :[]
      };
   },
  // 接收父组件传过来的值
  props: {
    title: {
      // type是指接收到的数据类型
      type: String,
      default: ''
    },
    subTitle: {
      type: String,
      default: ''
    },
    modelList: {
      type: Array,
      //接收类型，如果是数组则要这样写
      default: () => []
    }
  },
  // 可以在created中查看数据
   created() {
      console.log(this.data)
      // 可以将获取到的数据列表复制到data中的options中使用，也可以直接使用
      this.options = this.data
    }
}

父组件

<!-- 给子组件传值 -->
<Banner :bannerData ="modelList" ></Banner>


.......

// 引入子组件
import HomePannel from './components/home-pannel.vue'

// 注册子组件
export default {
  components: {
    Banner
  },
    data() {
     return {
      // 首页轮播图
      modelList: [
        {
          companyMsg: {
            imageUrl: require('@/assets/img/banner默认.png')
          },
          imgUrl: require('@/assets/img/banner默认.png')
        }
      ],
     }
    }
}

子传父

 子用 this.$emit() 传值

getDuration(res) {
          this.videoTime = formatDuraton(Math.floor(s))
          this.$emit("videoTime",this.videoTime)
      },

父在子标签用@接值

<UploadImgPop @videoTime = "videoTimefn" ref="uploadImgPop">

。。。

methods: {
      // 获取子传值
      videoTimefn(res){
        this.videoTimeData = res
        console.log(this.videoTimeData)
      },
}

具名插槽

子组件/功能组件

    <div class="home-panel">
        <div class="container">
          <div class="head">
            <!-- 右侧内容区域 -->
            <slot name="right"/>
          </div>
          <!-- 主体内容区域 -->
          <slot name="main"/>
        </div>
      </div>

父组件

        <home-pannel title="新鲜好物" sub-title="新鲜出炉">
            <!-- 注意插槽要写在使用的功能组件标签内 -->
            <!--#后面是具名插槽的名字-->
            <template #right>
              <span>右侧内容</span>
            </template>
            <template #main>
              <ul>
                <li>图片1</li>
                <li>图片2</li>
              </ul>
            </template>
          </home-pannel>

......

// 导入子组件
import HomePannel from './components/home-pannel.vue'

export default {
  // 注册子组件
  components: {
    HomePannel
  }
}

子组件接收数据时的格式

  props: {
    Str: {
      type: String,
      default: ''
    },
    Num: {
      type: Number,
      default: 0
    },
    Bool: {
      type: Boolean,
      default: true
    },
    Arr: {
      type: Array,
      default: () => []
    },
    Obj: {
      type: Object,
      default: () => ({})
    },
    Function: {
      type: Function,
      default: function () { }
    },
    manualId: {
      type: [Number, String],
      default: ''
    }
  }

对象原始格式

Object: {
  type: Object,
  default: function () {
    return {}
  }
}

父组件调用子组件的方法

1、在子组件的html解构中用 ref=“随便名称” 来定义方法

2、在任意地方都可以调用，格式为：

this.$refs.任意名称.子组件中的方法名()

<!-- 子组件 -->
<knowledge-data-analysis ref="knowledgeDataAnalysis"></knowledge-data-analysis>

。。。

import KnowledgeDataAnalysis from './components/knowledgeDataAnalysis'
export default {
  components: {
    KnowledgeDataAnalysis
  },
  methods: {
    this.$refs.knowledgeDataAnalysis.queryManualCntByKnowledgeFn({
          // 这里是调用方法时给方法传的值
          knowledgeId: this.value,
          beginDate: this.formatDateValue(new Date(this.time[0])),
          endDate: this.formatDateValue(new Date(this.time[1]))
    })
  }
}