桥头做网站,百度大数据搜索引擎,杭州市建设工程招标投标网,南宁网站制作定制组件的定义
个人理解 #xff1a;1、组件#xff0c;就是我们把某个功能模块进行封装#xff0c;在使用时直接引入进行使用#xff0c;极大的提高了代码的可复用性。2、在vue 中#xff0c;一个 [.vue] 文件#xff0c;就是一个组件。3、组件之间存在【引入】 与 【被引…组件的定义
个人理解 1、组件就是我们把某个功能模块进行封装在使用时直接引入进行使用极大的提高了代码的可复用性。2、在vue 中一个 [.vue] 文件就是一个组件。3、组件之间存在【引入】 与 【被引入】的依赖关系【被引入】的组件可以称之为 “子组件”【引入】其他组件的组件 可以称之为 “父组件”4、通过上述的 “父子组件” 之间的关系代码程序最终呈现的效果可能就是一棵 组件树根组件App.vue| -- 子组件1| -- 子组件11| -- 子组件12| -- 。。。| -- 子组件2| -- 子组件21| -- 。。。| -- 。。。
组件的特性
在 vue 中组件有如下特性 1、组件定义在 后缀为 [.vue] 的文件中2、组件在定义后会默认自动的导出给外部外部可以直接引入使用3、组件在使用时可以很方便的复用但是 每个复用组件它内部的数据状态都是独立的不会相互影响4、使用组件时推荐使用 【驼峰命名法】以此 和 原生的html 标签作为区分。5、但是可以支持的写法有 【驼峰命名 / 关闭标签】【驼峰命名正常关闭标签】【中划线命名正常关闭标签】组件的定义和使用案例 案例说明 1、定义 子组件 : 自己展示一点内容 2、定义父组件 引入子组件 进行使用展示。 定义子组件 ChildComponent.vue
template!-- 子组件 --div classchilddiv 子组件msg : {{ msg }}/div/templatescript setup langtsimport { ref } from vue// 声明一个变量const msg ref(这是子组件的msg变量)/scriptstyle scoped.childdiv{width: 300px;border: 1px solid green;}/style定义父组件 App.vue 这里为了简单点直接使用 【App.vue】 作为父组件了。 templatediv classbasediv父组件msg : {{ msg }}brbr!-- 子组件的使用 : 注意体会不同的写法效果都是一样的 --!-- 【驼峰命名 / 关闭标签】 推荐这种写法--ChildComponent /br!-- 【驼峰命名正常关闭标签】 --ChildComponent/ChildComponentbr!-- 【中划线命名正常关闭标签】 --child-component/child-component/div/templatescript setup langtsimport { ref } from vue// 引入子组件import ChildComponent from ./ChildComponent.vue// 声明父组件的一个变量const msg ref(这是父组件的msg变量)/scriptstyle scoped.basediv{width: 400px;height: 200px;border: 1px solid red;}
/style运行效果
