Vue.js前端开发案例教程项目四 Vue.js组件.pptx

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

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