07第4章Vue.js组件第1节组件的基本使用

第4章：Vue.js组件《Vue应用程序开发》

010203005Part14.1组件的基本使用Part24.2组件通信Part34.3动态组件Part44.4章节案例目录CONTENTS第4章Vue.js组件组件是可复用的Vue实例，通过“<>”包含组件名（如<button-counter>）在模板中使用。我们可以把组件作为自定义元素来使用。因为组件是可复用的Vue实例，所以它们与newVue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。前端组件化开发是现在前端框架中一个非常重要的思想，将页面内容进行拆分之后，可独立开发独立维护，可复用性大大提高。哪个地方出问题，直接去修改的对应的组件即可。团队人员可以各自修改自己的组件，相互不影响，不冲突。第4章Vue.js组件组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：4.1.1全局组件官方提供了直接使用Vue的component方法可以直接全局注册组件。（1）语法格式如下：第一步：注册Vponent(tagName,options)Vponent('my-component',{template:'<div><h1>这里是组件的内容</h1><h2>这里是组件的内容</h2></div>' });tagName为组件名，options为配置选项。第二步：使用组件我们可以通过<my-component></my-component>来调用组件。（2）使用范围：所有实例都能用全局组件。4.1.2局部组件我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用。（1）语法格式如下：第一步：注册<script>varChild={template:"<div><p>我是色板</p>\<inputtype='color'/>\</div>"}Vue.createApp({components:{'my-component':Child}}).mount("#app");</script>my-component为组件名，Child为配置选项。第二步：使用组件我们可以通过<my-component></my-component>来调用组件。（2）使用范围：只能在当前实例中使用该组件。4.1.3组件内的data必须是一个函数组件中的data不是一个对象，而是一个函数。如果data是一个对象则会影响到其他实例，因为JavaScript对象是引用类型。data不是函数data是函数4.1.4使用template元素创建组件为了使HTML代码和JavaScript代码是分离的，便于以后的阅读和维护，我们通常建议使用<script>或<template>标签创建组件模板内容。在上例中，我们将组件内的元素直接写在<template></template>标签内，这样就可以正常给标签换行，符合我们之前写HTML标签的写法规则，使代码的可读性变得更强。这里同样要注意<template></template>内只能由一个根节点，否则浏览器会报错。4.1.5组件嵌套组件嵌套是把组件与组件嵌套在一起，在父组件下的模板中，以标签的形式调用子组件。下图组件树的示意图形象的展示了组件之间的层级关系：4.1.5组件嵌套实例：父组件<parent></parent>以标签的形式调用了子组件<my-child1></my-child1>和<my-child2></my-child2>。4.1.6使用props传递数据组件不仅仅要把模板的内容进行复用，更重要的是组件间要进行通信。通常外部的数据要传给组件或者父组件的数据要传给子组件，这种正向传递数据的过程就是通过props来实现的。在组件中，使用选项props来申明需要从父级接收的数据，props的值可以是两种，一种是字符串数组，一种是对象。1.props的值是数组<divid="app"><my-componentmessage="来自父组件的数据"></my-component></div><script>varapp=Vue.createApp({})ponent('my-component',{props:['message'],template:'<div>{{message}}</div>'});app.mount("#app")</script>1.props的值是数组使用指令v-bind来动态绑定props的值，当父组件的数据变化时，也会传递给子组件。<divid="app"><my-component:message='message'></my-component></div><scriptsrc="vue.js"></script><script>varapp=Vue.createApp({data(){return{message:'外部数据'}}})ponent('my-component',{props:['message'],template:'<div>{{message}}</div>'});app.mount("#app")</script>1.props的值是数组项目开发中会经常遇到以下两种需要改变prop的情况：（1）父组件将初始值传递进来，子组件将它作为初始值保存起来，在自己的作用域中可以随意使用和修改初始值。在这种情况下，可以在组件data中再声明一个数据，并引用父组件的props。（2）props作为需要被转换的原始值传入。这种情况下使用计算属性即可。2.props的值是