《Vue 3基础入门》课件 第四章 Vue 3组件.pptx

Vue3组件

介绍组件是Vue3中最核心的功能之一，可用于前端应用程序的模块化开发，实现系统的可重用性和可扩展性。组件是可复用的实例，在根组件实例中可用的选项也可以在组件中使用。开发人员能使用可复用组件系统构建大型应用程序，几乎所有类型的应用程序界面都可以抽象为一棵组件树。

Contents目录快速构建页面组件间数据传递内容分其他应用

01快速构建页面PART

1.1基本使用方法//定义一个名为button-counter的新组件Vponent(button-counter,{data:function(){return{count:0}},template:buttonv-on:click=count++Youclickedme{{count}}times./button})

1.1基本使用方法组件是可复用的Vue3实例且带有一个名字，在这个例子中是button-counter。开发者可以在通过newVue创建的Vue3根实例中，将这个组件作为自定义元素来使用，代码如下：divid=components-demobutton-counter/button-counter/div组件可以接收与newVue相同的选项，如data、computed、watch、methods以及钩子函数等，但el选项例外。

1.2组件复用每当复用一个组件时，都会创建一个独立的组件实例，每个实例都独立维护它的数据。定义button-counter组件时，data选项并不是一个对象，而是一个函数，这是因为组件的data选项必须返回一个对象的独立拷贝，以便每个组件实例可以维护自己的一份数据，代码如下：data:function(){return{count:0}}

1.3组织结构通常情况下，应用程序会以一棵嵌套的组件树的形式进行组织，如图：需要将组件注册到Vue3实例中才能使用，组件的注册方式分为全局注册和局部注册两种，全局注册组件使用Vue3实例的component()函数，该函数接收两个参数，第一个参数是组件的名称，第二个参数是组件的配置对象或组件的选项。注册的语法形式如下：ponent({string}name,{FunctionIObject}definition(optional))

1.3组织结构下面是一个全局注册组件的例子代码：constapp=Vue.createApp({});ponent(ButtonCounter,{data(){return{count:0}},template:button@click=count++Youclickedme{{count}}times./button});app.mount(#app);

1.3组织结构1.组件的内容可以通过template选项定义，在使用组件时，组件所在位置会被template选项的内容所替换。组件注册完成后，可以将组件视为自定义元素，在需要的地方按照元素的方式使用，元素的名称就是注册时指定的组件名称。divid=appButtonCounter/ButtonCounter/div2.上述代码并不能正常工作，因为HTML并不区分元素和属性的大小写，浏览器会把所有大写字符解释为小写字符，例如：会把ButtonCounter解释为buttoncounter，这就导致找不到组件而出现错误，解决办法是在HTML模板中采用kebab-case命名引用组件。divid=appbutton-counter/button-counter/div

1.3组织结构只要组件注册时采用的是PascalCase（首字母大写）命名，就可以采用kebab-case命名来引用。在非HTML模板中可以使用组件的原始名称，即ButtonCounter和button-counter都是可以的。如果要保持名字的统一性，可以在注册组件时，直接使用kebab-case命名为组件命名，例如：ponent(button-counter,...)

1.3组织结构T由于HTML不支持自闭合的自定义元素，在HTML模板中不能将ButtonCounter组件当作自闭合元素使用。例如：不能使用button-counter/，而应该使用button-counter/button-counter。在非HTML模板中不存在这个限制，相反还鼓励将没