基本信息
文件名称:Vue.js前端开发案例教程项目四 Vue.js组件.pptx
文件大小:26.52 MB
总页数:121 页
更新时间:2025-03-04
总字数:约1.91千字
文档摘要

;;Vue.js组件;;;;制作订餐系统的购物车模块;;;01;09;;组成部分;;在?HTML?文件中,以一个包含?Vue.js?特定选项的?JavaScript?对象来定义组件,语法格式如下。

;!--在该标签中编写组件的模板--

templateid=id选择器名…/template

script

const组件名={

template:id选择器名,//通过id选择器名指向含有组件模板内容的标签

setup(){…}

}

script

style…/style

;;;在?Vue.js?项目中,以单文件组件的形式来定义组件。Vue.js?为单文件组件的逻辑部分提供了?setup?语法糖,用于简化组合式?API?的代码。

①使用了?setup?语法糖的单文件组件的语法格式如下。

;②单文件组件的逻辑部分也可以不使用setup语法糖,语法格式如下。;;;;;;;;1.在子组件中声明数据

;1.在子组件中声明数据

;1.在子组件中声明数据

;1.在子组件中声明数据

;1.在子组件中声明数据

;2.在父组件中传递数据

;2.在父组件中传递数据

;(3)传递布尔类型的静态数据时,可以只传递数据名,数据值默认为true,语法格式如下。

子组件标签名数据名/子组件标签名 //数据值默认为true

(4)父组件要向子组件传递多个具体数据时,可以使用一个对象定义多个数据,使用?v-bind指令作为属性名为子组件标签绑定数据,语法格式如下。

子组件标签名v-bind=对象名/子组件标签名;;;;;1.在子组件中声明自定义事件

;2.在子组件中触发自定义事件

;2.在子组件中触发自定义事件

;3.在父组件中监听自定义事件

;;;;;1.祖先组件提供数据

;1.祖先组件提供数据

;2.后代组件注入数据

;2.后代组件注入数据

;;;;;1.在子组件中定义默认插槽

;2.在父组件中定义默认插槽的内容

;;1.在子组件中定义具名插槽

;在父组件中,可以在子组件标签内搭配使用template标签和?v-slot?指令定义具名插槽的内容,语法格式如下。

子组件标签名

templatev-slot:插槽名…/template

/子组件标签名

Vue.js?也提供了?v-slot?指令的简写形式,可简写为如下格式。

子组件标签名

template#插槽名…/template

/子组件标签名

;;1.在子组件中定义作用域插槽

;2.在父组件中定义作用域插槽的内容

;2.在父组件中定义作用域插槽的内容

;2.在父组件中定义作用域插槽的内容

;;;;;在Vue.js中,可以使用component标签定义动态组件,语法格式如下。

component:is=要切换的组件/component;组件缓存主要用于提高应用性能,防止组件的频繁创建和销毁。

在Vue.js中,可以使用KeepAlive组件实现组件缓存,语法格式如下。

keep-alive

!--缓存的组件--

/keep-alive

注:KeepAlive?组件是?Vue.js?的内置组件,不需要定义便可直接使用。在单文件组件中,keep-alive标签也可写为KeepAlive。

;1.include属性和exclude属性

;1.include属性和exclude属性

;2.max属性

;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;