龙元建设陕西公司网站,网页上上传wordpress,网件路由器怎么设置,宁德市医院东侨院区编程时的一点感受#xff1a; 感觉子组件本身像是java的一个类#xff0c;父组件像是启动类#xff0c;父组件里引用子组件像是创建子组件的对象
查找资料后#xff0c;发现确实如此#xff0c;在很多方面#xff0c;Vue 组件确实可以与面向对象编程中的类进行类比。…编程时的一点感受 感觉子组件本身像是java的一个类父组件像是启动类父组件里引用子组件像是创建子组件的对象
查找资料后发现确实如此在很多方面Vue 组件确实可以与面向对象编程中的类进行类比。 子组件Vue 组件类似于 Java 中的类 属性 (Props): 在 Vue 组件中props 类似于 Java 类中的属性或字段。它们是从父组件传递到子组件的数据。 Java 类中的属性private int id;Vue 组件中的 propsconst props defineProps{ id: number }(); 方法 (Methods): 在 Vue 组件中你可以定义方法来处理逻辑这类似于 Java 类中的方法。 Java 类中的方法public void someMethod() { ... }Vue 组件中的方法const someMethod () { ... }; 生命周期钩子 (Lifecycle Hooks): Vue 组件有生命周期钩子如 mounted, beforeUnmount 等这些类似于 Java 类中的构造函数和析构函数。 Java 类中的构造函数public MyClass() { ... }Vue 组件中的生命周期钩子onMounted(() { ... }); 模板 (Template): Vue 组件中的模板部分定义了组件的视图这类似于 Java 中的 UI 渲染逻辑例如在 Swing 或 JavaFX 中。 父组件类似于启动类 创建子组件的对象: 在 Vue 中父组件通过 child-component :propvalue / 的方式引用子组件并传递必要的属性。这类似于在 Java 中创建一个类的实例并传递参数给构造函数。 Java 中创建对象MyClass obj new MyClass(someValue);Vue 中引用子组件ChildComponent :somePropsomeValue / 管理多个子组件: 父组件可以包含和管理多个子组件这类似于 Java 中的一个主类管理多个其他类的实例。 Java 中的主类public class Main { public static void main(String[] args) { ... } }Vue 中的父组件templateChildComponent1 /ChildComponent2 //template 示例
假设你有一个简单的 Vue 应用其中有一个父组件 ParentComponent 和一个子组件 ChildComponent。
子组件 (ChildComponent.vue)
script setup
import { defineProps } from vue;const props defineProps{id: number;name: string;
}();const greet () {console.log(Hello, ${props.name}! Your ID is ${props.id}.);
};
/scripttemplatedivh1{{ name }}/h1pID: {{ id }}/pbutton clickgreetGreet/button/div
/template 父组件 (ParentComponent.vue)
templatedivh1Parent Component/h1ChildComponent :id1 :nameJohn Doe /ChildComponent :id2 :nameJane Smith //div
/templatescript setup
import ChildComponent from ./ChildComponent.vue;
/script
在这个例子中
ChildComponent 定义了两个必需的属性 id 和 name以及一个方法 greet。ParentComponent 引用了 ChildComponent 两次并为每个引用传递了不同的 id 和 name 属性。 总结 这种结构使得 Vue 组件化开发具有高度的模块化和可复用性类似于面向对象编程中的类和对象的关系。
