了解:组件和组件的值的分享

news2024/12/23 14:31:34

<template>
  <Block title="热门公司">
    <div slot="content" class="container">
      <CompanyList :company-list="currentPageCompany"></CompanyList>

      <div class="pagination">
        <el-pagination
                background
                layout="prev, pager, next"
                @prev-click="prevClick"
                @next-click="nextClick"
                @current-change="currentChange"
                :total="totalPageCount">
        </el-pagination>
      </div>
    </div>
  </Block>
</template>

<script lang="js">
  import CompanyList from "@/views/hotCompany/CompanyList"
  import jobData from "@/database/jobData"

  export default {
    name: "HotCompany",
    components: {
      CompanyList
    },
    data() {
      return {
        currentPage: 1,
        currentPageCompany: [],
      }
    },
    computed: {
      totalPageCount() {
        return Array.from(jobData).length + 2149 / 18 * 10;
      }
    },
    methods: {
      handleChange(value) {
        console.log(value);
      },
      prevClick(currentPage) {
        this.currentPageCompany = jobData.slice((currentPage - 1) * 18, currentPage * 18);
      },
      nextClick(currentPage) {
        this.currentPageCompany = jobData.slice((currentPage - 1) * 18, currentPage * 18);
      },
      currentChange(currentPage) {
        this.currentPageCompany = jobData.slice((currentPage - 1) * 18, currentPage * 18);
      }
    },
    created() {
      this.currentPageCompany = jobData.slice(0, 18);
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    .pagination {
      display: flex;
      justify-content: center;
    }
  }
</style>

问:

解释<CompanyList :company-list="currentPageCompany"></CompanyList>

chatGPT:

这是一个 Vue.js 的模板语法,用于使用组件 `<CompanyList>` 并向其传递一个名为 `currentPageCompany` 的属性值。

`<CompanyList>` 是一个自定义的组件,通过 `:company-list="currentPageCompany"` 这段代码将 `currentPageCompany` 绑定到了该组件的 `company-list` 属性上。这意味着在 `<CompanyList>` 组件内部可以通过 `this.companyList` 来访问传入的 `currentPageCompany` 值。

例如,如果 `<CompanyList>` 组件的代码如下所示:


<template>
  <div>
    <ul>
      <li v-for="company in companyList" :key="company.id">{{ company.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['companyList']
}
</script>


在这个例子中,`<CompanyList>` 组件接受一个名为 `companyList` 的属性,并通过 `v-for` 指令遍历 `companyList` 数组,将每个公司的名称显示为一个列表项。

你可以在父组件中定义 `currentPageCompany` 数据,并将其传递给 `<CompanyList>` 组件,如下所示:


<template>
  <div>
    <CompanyList :company-list="currentPageCompany"></CompanyList>
  </div>
</template>

<script>
import CompanyList from './CompanyList.vue';

export default {
  components: {
    CompanyList
  },
  data() {
    return {
      currentPageCompany: [
        { id: 1, name: 'Company A' },
        { id: 2, name: 'Company B' },
        { id: 3, name: 'Company C' }
      ]
    }
  }
}
</script>


在这个例子中,`currentPageCompany` 是父组件的一个数据属性,包含了一个公司列表。通过使用 `<CompanyList :company-list="currentPageCompany"></CompanyList>` 将 `currentPageCompany` 数据传递给 `<CompanyList>` 组件的 `company-list` 属性。

当父组件渲染时,将会渲染 `<CompanyList>` 组件,并根据传入的属性值动态显示公司列表。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1031419.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【高级IO】第一讲(5种IO模型的介绍、select函数介绍、一个简单select服务器)

高级IO 1.五种IO模型介绍2.Select函数介绍 1.五种IO模型介绍 点击跳转: 5种I/O模型 2.Select函数介绍 点击跳转: 【Linux】——select详解

LeetCode 接雨水 双指针

原题链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题面&#xff1a; 给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水。 示例 1&#xff1a; 输入&#xff1a…

2023华为杯研究生数学建模C题分析

完整的分析查看文末名片获取&#xff01; 问题一 在每个评审阶段&#xff0c;作品通常都是随机分发的&#xff0c;每份作品需要多位评委独立评审。为了增加不同评审专家所给成绩之间的可比性&#xff0c;不同专家评审的作品集合之间应有一些交集。但有的交集大了&#xff0c;则…

git 常用命令分享

git官网地址&#xff1a;https://git-scm.com/ 1.设置用户名 邮箱 设置用户名: git config --global user.name “name” 设置邮箱&#xff1a; git config --global user.email "email" 2.查看设置的信息 git config --list 以上设置的信息在用户目录下&#xff1…

Python —— pytest框架

1、认识pytest框架 1、搭建自动化框架的思路与流程 1、搭建自动化测试框架的思路和流程&#xff0c;任意测试手段流程都是一致的&#xff1a;手工测试、自动化测试、工具测试 手工测试&#xff1a;熟悉业务 —— 写用例 —— 执行用例并记录结果 —— 生成测试报告自动化测试…

DETR纯代码分享(八)position_encoding.py(models)

一、导入一些Python库和模块 import math import torch from torch import nnfrom util.misc import NestedTensor 上面的代码段主要是Python代码&#xff0c;用于导入一些Python库和模块&#xff0c;以下是对每行代码的详细解释&#xff1a; import math: 这一行代码导入了P…

Node.js VS Python:程序员该选择哪个作为爬虫语言?

对于程序员来说&#xff0c;选择合适的语言作为爬虫开发工具很重要。在这篇文章中&#xff0c;我们将探讨使用Node.js和Python进行爬虫开发的优势和劣势&#xff0c;帮助你做出明智的选择&#xff0c;并提供一些实际操作价值的建议。 一、Node.js的优势与劣势 1、优势&#xf…

《Playing repeated games with Large Language Models》全文翻译

《Playing repeated games with Large Language Models》- 使用大型语言模型玩重复游戏 论文信息摘要1. 介绍2. 相关工作3. 一般方法4. 分析不同游戏系列的行为5. 囚徒困境5.1 性别之战 6. 讨论 论文信息 题目&#xff1a;《Playing repeated games with Large Language Model…

勇立潮头!高品质SFT语音数据实现Zero-Shot语音复刻大模型

文本到语音合成&#xff08;Text to Speech&#xff0c;TTS&#xff09;作为生成式人工智能&#xff08;Generative AI 或 AIGC&#xff09;的重要课题&#xff0c;在近年来取得了飞速发展。为了实现高效合成既自然又高质量的人类语音&#xff0c;有不少机构及企业都进行了相关…

安防监控视频AI智能分析网关:人流量统计算法的应用场景汇总

TSINGSEE青犀人流量检测算法是内置在智能分析网关中的一种能够通过AI分析和计算人群数量以及密度的算法技术&#xff0c;在提升城市管理效率、改善用户体验和增加安全性方面发挥着重要作用。人流量检测算法在许多领域都有广泛的应用&#xff0c;如智慧城市、智慧交通、智慧景区…

计算机网络运输层网络层补充

1 CDMA是码分多路复用技术 和CMSA不是一个东西 UPD是只确保发送 但是接收端收到之后(使用检验和校验 除了检验的部分相加 对比检验和是否相等。如果不相同就丢弃。 复用和分用是发生在上层和下层的问题。通过比如时分多路复用 频分多路复用等。TCP IP 应用层的IO多路复用。网…

微软宣布推广数字助理 Copilot;GPT 应用开发和思考

&#x1f989; AI新闻 &#x1f680; 微软宣布推广基于生成式人工智能的数字助理 Copilot 摘要&#xff1a;微软宣布将基于生成式人工智能的数字助理 Copilot 推广到更多软件产品中。新的 AI 助理 Microsoft Copilot 将在 Windows 中无缝可用&#xff0c;包括 Windows 11 桌面…

【校招VIP】专业课考点之TCP连接

考点介绍&#xff1a; 在TCP&#xff0f;IP中&#xff0c;TCP协议通过三次握手来建立连接&#xff0c;从而提供可靠的连接服务。本专题主要介绍一线互联网大厂面试关于TCP连接的相关问题。 专业课考点之TCP连接-相关题目及解析内容可点击文章末尾链接查看&#xff01; 一、考…

软件测试/测试开发丨利用人工智能ChatGPT自动生成架构图

点此获取更多相关资料 简介 架构图通过图形化的表达方式&#xff0c;用于呈现系统、软件的结构、组件、关系和交互方式。一个明确的架构图可以更好地辅助业务分析、技术架构分析的工作。架构图的设计是一个有难度的任务&#xff0c;设计者必须要对业务、相关技术栈都非常清晰…

蓝桥杯打卡第14天

文章目录 最短路径最短路径 一、最短路径OJ链接 本题思路:本题是一道简单 的图论题&#xff0c;用floyd算法还是比较简单的&#xff0c;因为代码很短&#xff0c;这里需要用一个backup用来保存未删除边时的情况。当走完一次floyd之后&#xff0c;拷贝给dist数组来进行删除边的…

轻松搞定Spring集成缓存,让你的应用程序飞起来!

Spring集成缓存 缓存接口开启注解缓存注解使用CacheableCachePutCacheEvictCachingCacheConfig 缓存存储使用 ConcurrentHashMap 作为缓存使用 Ehcache 作为缓存使用 Caffeine 作为缓存 主页传送门&#xff1a;&#x1f4c0; 传送 Spring 提供了对缓存的支持&#xff0c;允许你…

威联通NAS安装Openwrt旁路由教程

Hello大家好&#xff0c;有一段时间没有折腾NAS了 &#xff0c;最近搞了一台威联通的TS-464C2&#xff0c;平时用来存储一下数据什么的&#xff0c;感觉有点浪费&#xff0c;刚好威联通自带有虚拟机的软件&#xff0c;直接拿来装个软路系统岂不是美滋滋。 首先说一下这个机器…

Python经典练习题(一)

文章目录 &#x1f340;第一题&#x1f340;第二题&#x1f340;第三题&#x1f340;第四题&#x1f340;第五题 &#x1f340;第一题 有四个数字&#xff1a;1、2、3、4&#xff0c;能组成多少个互不相同且无重复数字的三位数&#xff1f;各是多少&#xff1f; 这里我们使用…

【湖科大教书匠】计算机网络随堂笔记第1章(计算机网络概述)

目录 1.1、计算机网络在信息时代的作用 我国互联网发展状况 1.2、因特网概述 1、网络、互连网&#xff08;互联网&#xff09;和因特网 2、因特网发展的三个阶段 因特网服务提供者ISP(Internet Service Provider) 基于ISP的三层结构的因特网 3、因特网的标准化工作 4、因特网的…

基于PHP语言研发的抖音矩阵系统源代码开发部署技术文档分享

一、概述 本技术文档旨在介绍抖音SEO矩阵系统源代码的开发部署流程&#xff0c;以便开发者能够高效地开发、测试和部署基于PHP语言的开源系统。通过本文档的指引&#xff0c;您将能够掌握抖音SEO矩阵系统的开发环境和部署方案&#xff0c;从而快速地构建出稳定、可靠的短视频S…