Cocos Creator 节点和组件的简单理解01

最新推荐文章于 2025-02-14 18:05:06 发布

HURRICANE_FAST

最新推荐文章于 2025-02-14 18:05:06 发布

阅读量1.4k

点赞数 1

分类专栏： cocos creator 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34703156/article/details/120177516

版权

cocos creator 专栏收录该内容

11 篇文章

订阅专栏

这篇博客探讨了Unity引擎中节点（Node）和组件（Component）的概念及其关系。节点可以是UI元素或3D对象，而组件包括脚本、材质等。重点在于组件与节点的交互，特别是如何通过`getComponent`和`getComponentInChildren`方法来获取子节点的组件。文章通过示例代码展示了不同方法的使用场景和效果，强调了直接获取子组件的条件以及正确引用子节点组件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：节点和组件的概念

节点：在层级管理器中创建UI组件 2D 或3D ，空节点等。节点可以理解为一个Dom，一个 Button，或者一个 HTML脚本。

组件：在资源管理器上创建的ts， js 脚本，物理材质，动画片段，都是可以成为组件。可以理解为 HTML引入的JS脚本但不仅限于脚本。

2：组件和节点的关系

父 : 当我在N_0 的之节点上绑定组件ts_0.ts时：如图所示

ts_0.ts 代码如下：


import { _decorator, Component, Node, Label } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('Ts0')
export class Ts extends Component {

    // @property({ type: Label })
    // lable_0_2: Label | null = null;

    start() {
        let consoleTable = [

            {
                Input: "this.getComponentInChildren(Label)",
                result: this.getComponentInChildren(Label),
                descirpt: "Lable:Node类型，Ts01:Component组件类型"
            },
            {
                Input: "this.getComponentInChildren(Ts_0_1)",
                result: this.getComponentInChildren("Ts_0_1"),

                descirpt: " "
            },
            {
                Input: "this.getComponent(Ts_0_1)",
                result: this.getComponent("Ts_0_1"),
                descirpt: ""
            },
            {
                Input: "this.getComponent(Label)",
                result: this.getComponent(Label),
                descirpt: ""
            },

            {
                Input: "this.node.getComponents(Label)",
                result: this.node.getComponents(Label),
                descirpt: " "
            },
            {
                Input: "this.node.getComponentInChildren(Label)",
                result: this.node.getComponentInChildren(Label),
                descirpt: ""
            },
            {
                Input: "this.node.getComponentInChildren(Ts_0_1)",
                result: this.node.getComponentInChildren("Ts_0_1"),
                descirpt: " "
            },
            {
                Input: "this.node.getComponent(Ts_0_1)",
                result: this.node.getComponent("Ts_0_1"),
                descirpt: ""
            },
        ]
        console.table(consoleTable)
    }

    // update (deltaTime: number) {
    //     // [4]
    // }
}

子节点：绑定 TS_0_1.js组件