VUE 组件中自己调用自己

这篇具有很好参考价值的文章主要介绍了VUE 组件中自己调用自己。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

父组件 ( 正常引入调用 )

<template>
    <div>
        <moduleSun :chartData="item" v-for="(item,index) in chartData" :key="index" />
    </div>
</template>

<script>
import moduleSun from '@/views/moduleSun'
export default {
    components: { moduleSun },
    data() {
        return {
            chartData: [{
                nameCN: '111',
                nameEN: 'en111',
                remarks: '我是111',
                children: [{
                    nameCN: '222',
                    nameEN: 'en222',
                    remarks: '我是222',
                    children: [{
                        nameCN: '222-111',
                        nameEN: 'en222-111',
                        remarks: '我是222-111',
                    }],
                }, {
                    nameCN: '333',
                    nameEN: 'en333',
                    remarks: '我是333',
                }],
            }],
        }
    },
}
</script>

子组件 ( 组件中需定义name名称 )文章来源地址https://www.toymoban.com/news/detail-597848.html

<template>
    <div class="chart-layout">
        <div class="chart-main">
            <div>{{chartData.nameCN}}</div>
            <div class="chart-en">{{chartData.nameEN}}</div>
            <div class="chart-remarks">{{chartData.remarks}}</div>
        </div>
        <moduleSun :chartData="item" v-for="(item,index) in chartData.children" :key="index" />
    </div>
</template>

<script>
export default {
    name: 'moduleSun',
    props: {
        chartData: {
            type: Object,
            default: () => {
                return {}
            }
        },
    },
}
</script>

<style lang="less" scoped>
.chart-main {
    width: 100px;
    border: 1px solid #000;

    > div {
        margin-top: 5px;
    }
}
</style>

到了这里,关于VUE 组件中自己调用自己的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【庖丁解牛】vue-element-admin前端CRUD通用操作组件详解,对,核心就是crud.js文件

    vue-element-admin 框架之所以能够快速定制应用,得益于其通配的CRUD操作,属性配置多样化且个性化,能够满足绝大部分开发需求,也方便了代码生成。 可以深入学习重点源文件是: src/components/Crud/crud.js ,一共 863 行代码,以及下图中其它四个vue组件,形成了对通用CRUD操作的高

    2024年01月18日
    浏览(56)
  • vue3 组件自己引用自己 递归组件 组件命名

    本人前端开发一枚,以前一直用vue2.0,为了更新自己掌握的技术学习如何使用vue3.0。 在vue3.0项目中想要实现菜单组件,要使用到递归组件的方法,发现不知道怎么给组件重命名!! 在vue2.0中想要实现递归组件方式很简单,只要给组件命名,然后自己调用即可: 然而在vue3.0中

    2024年02月06日
    浏览(48)
  • 前端Vue项目调用页面web3.js:连接metaMask钱包,(查询钱包ETH余额,查询代币余额,ETH转账,代币转账,代币授权,查询授权数量,计算价格)等功能

    这里分享下相关文档 1.web3.js中文文档 https://learnblockchain.cn/docs/web3.js/getting-started.html 2.metamask官方文档:https://docs.metamask.io/ 第一种方法:连接钱包 源码: 第二种方法: 连接钱包 安装依赖直接可以使用 源码: 其他功能: 1、在 mounted 中自动检测浏览器是否安装MetaMask钱包 2、查询

    2024年02月11日
    浏览(48)
  • JavaScript - 判断当前时间是否在指定区间内,例如:9:00~12:00(检查当前时间是否处于规定的两个时间段范围内),适用于 vue.js / uniapp / 微信小程序等前端项目

    例如,您想知道当前时间是否处于 9:00 ~ 12:00 时间区间内,然后根据这个判断进而实现业务逻辑。 如下示例所示, 本文提供一个函数,您只需要传入 2 个时间区间,便可得出当前时间是否在该时间区间范围内: 您可以一键复制,直接粘贴到您的项目中。 您只需要传入开始时

    2024年02月16日
    浏览(60)
  • vue制作自己的组件库(仿ElementUI)

    1.首先自己创建个新的vue项目,之后更改下目录形式,将src文件更改为examples,这里是专门放组件展示的md文件,packages文件里是放自己写的组件代码 2.然后是开始配置vue.config.js文件 ,其中md-loader是读取md文件的相关配置      3.配置好了之后,就可以开始写组件了,这里就举

    2024年02月08日
    浏览(39)
  • Vue中对组件的调用

             在Vue中,你可以在一个页面中调用其他组件,以实现组件的复用和组合效果。以下是在Vue中实现调用页面组件的几种常见方法之一: 1.使用Vue的组件标签: 你可以在Vue的模板中使用已注册的组件标签,以调用和渲染其他组件。首先,确保你已经在Vue应用中注册了

    2024年02月14日
    浏览(29)
  • Vue子组件关闭后调用刷新父组件方法

    实现效果   调用方法 当在子组件里更改了某些信息且关闭子组件后,需要父组件更新修改后的内容,操作如下: 1、$emit触发 2、使用$parent触发父组件 更新数据是由某个方法触发,如getList() 常见问题 在开发 Vue 项目中,遇到了一个这样的问题: 其中UI框架使用的是iview UI , 在

    2024年02月11日
    浏览(41)
  • vue3父组件调用子组件的方法

    东风vue3 父组件调用子组件的方法是通过 expose 和 ref 来实现的,我们可以通过 expose 来控制父组件可以访问子组件那些的方法和对象,我们将通过 setup api (组合式 api)和 option api (选项式 api)来演示父组件如何调用子组件的方法。 1,组合式API 父组件通过ref定义子组件实例,通过

    2024年02月11日
    浏览(41)
  • 前端(vue)npm如何发布自己的包

    4.1然后执行:npm run lib会得到lib文件夹 4.2配置package.json 在npm官网(https://www.npmjs.com/)按照步骤注册一个账号,我这边已经注册好了直接登录就行 6.1注册成功之后然后在终端中输入命令 出现这个之后就说明登陆成功了 6.2更新命令 这就可以使用了!!!

    2024年02月12日
    浏览(50)
  • VUE中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用

    场景:自定义一个通用组件,需要调用父组件的方法进行计算 一、使用this.$emit()向父组件触发一个事件,父组件监听这个事件即可。 父组件: 子组件: 二、直接在子组件中通过“this.$parent.event”来调用父组件的方法。 父组件: 子组件: 三、父组件把方法传入子组件中,在子

    2024年02月04日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包