|
标题：冯文直-前端-20230208 一、今日学习内容： Vue组件 组件就是对局部视图的封装，每个组件包含了HTML 结构 CSS 样式 JavaScript 行为 data 数据 methods 行为 组件基本使用 为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。 有两种组件的注册类型：全局注册和局部注册 组件命名 可使用驼峰(camelCase)或者横线分隔(kebab-case)命名方式 但 DOM 中只能使用横线分隔方式进行引用组件 建议使用驼峰方式，适用性更强，DOM中使用组件时要转换成短横线方式。 全局组件 一般把网页中特殊的公共部分注册为全局组件：轮播图、分页、通用导航栏 全局注册之后，可以在任何新创建的 Vue 实例 (new Vue) 的模板中使用 创建组件的方式 组件构造器 1创建组件构造器:Vue.extend({}) 2注册已经创建好的组件:Vue.component(" abc", 构造器); 3使用注册好的组件：<abc></abc> // 2 注册已经创建好的组件 注意点： 1 vue2.x仅支持：单个根元素，最外层要有个<div>包裹 vue3.x支持：多个根节点元素 2 模板支持指令语法 模板字符串（反引号``）需要浏览器提供支持（ES6语法），学了前端工程化就不需要关注这个问题了。 3 ==在组件中data是个函数，vue的data是个对象。==
全局组件：在任何一个Vue实例控制的区域中都可以使用 局部组件：只能在自定义的那个Vue实例控制的区域中可以使用 如何自定义一个局部组件 在vue实例中新增属性components: {} 在{}中通过key/vue形式注册组件 组件中的data和methods组件是可复用的 Vue 实例，不需要手动实例化，与 new Vue 接收相同的选项 组件的 data 选项必须是一个函数 因为自定义组件可以复用, 为了保证复用时每个组件的数据都是独立的, 所以必须是一个函数组件中的data如果不是通过函数返回的, 那么多个组件就会公用一份数据, 就会导致数据混乱，如果组件中的data是通过函数返回的, 那么每创建一个新的组件, 都会调用一次这个方法，将这个方法返回的数据和当前创建的组件绑定在一起, 这样就有效的避免了数据混乱 组件切换 v-if切换： v-if的方式来切换视图: 创建和销毁(导致组件的状态不能留存) v-show切换： 显示和隐藏,没有办法操作Dom结构(会保存组件的状态)
1.组件切换
对于普通的元素我们可以通过v-if来实现切换
对于组件我们也可以通过v-if来实现切换
因为组件的本质就是一个自定义元素
动态组件
通过v-if/v-else-if/v-else确实能够切换组件 但是在Vue中切换组件还有一种更专业的方式 <component v-bind:is="需要显示组件名称"></component> component我们称之为动态组件, 也就是你让我显示谁我就显示谁。 component可以配合keep-alive来保存被隐藏组件隐藏之前的状态，保持这些组件的状态，以避免反复重新渲染导致的性能问题 is后绑定的是会被展示出来的组件名 父子组件 在一个组件中又定义了其它组件就是父子组件 其实局部组件就是最简单的父子组件, 因为我们说过可以把Vue实例看做是一个大组件 我们在Vue实例中定义了局部组件, 就相当于在大组件里面定义了小组件, 所以局部组件就是最简单的父子组件 如何定义其它的父子组件
自定义组件中可以使用data, 可以使用methods. 当然自定义组件中也可以使用components，所以我们也可以在自定义组件中再定义其它组件
父子组件通信 props 父组件向子组件传递数据 $emit 自定义事件 slot 插槽分发内容 父子组件数据传递 在Vue中子组件是不能访问父组件的数据的, 如果子组件想要访问父组件的数据, 必须通过父组件传递
在父组件中通过v-bind传递数据 在子组件中通过props接收数据 父子组件传递方法-自定义事件 父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！ 我们可以使用 v-on(@) 绑定自定义事件 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 二、今日问题：无 三、解决方案：无
| 
