;;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属性
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;