1 概念理解
1 Vue 实例 == 根组件
2 组件分为: 全局组件 + 局部组件
3 每个组件, 只能访问自己的 data 数据
4 全局组件父子关系, 取决于如何调用的, 没有固定关系
5 局部组件父子关系, 取决于注册的结构, 祖先组件可以调动后代组件
6 全局组件是公用的, 局部组件只能在当前注册的实例内使用
7 <style scoped> -- 限制样式的作用范围 -- 防止单文件组件的样式和其他文件的样式冲突
8 组件标签名, 必须使用两个以上的单词, 并使用 - 连接
2 基础操作
1 组件注册
--------------------------------------------------------------------------------------
1 全局组件:
Vue.component( 'my1', {
template: `<h2> 哈哈哈 </h2>`, ... } )
2 局部组件 -> 组件配置项内部:
components: {
my1: {
template: "<h3>这孤独的夜</h3>", ... } }
--------------------------------------------------------------------------------------
2 组件通信
--------------------------------------------------------------------------------------
1 作用: 让组件之间可以传递数据
2 父子通信
1 设置 -- 调用子组件标签时 --> 加自定义属性传值 --> 子组件配置项 props接收数据 (多种方式)
2 props 接收数据的方式 msg==自定义属性
1 props: [ "msg"] 不要直接修改 props接收数据的变量 msg
2 props: {
msg: String} 限制接收类型 ( String -- Number -- Boolean -- Array -- Object -- Date -- Function -- Symbol )
3 props: {
msg: [String, Number]} 接收俩种数据类型
4 props: {
msg: {
type: String, default: 'CAN', }} 可设置默认值 -- 注意接收数据 -- 默认值是有区别的
3 子父通信
1 调用子组件标签时 --> 加自定义事件接收数据 --> 事件函数会默认接收一个子组件发送的实参数据 (记得写形参接收)
2 子组件内部执行 -- this.$emit( "ck1", data) --> 发射数据 ck1==自定义事件名
3 子组件发射数据后 -- 会去自动执行父组件自定义的事件函数接收数据
4 事件总线
1 作用: 解决兄弟组件之间的数据交互 是一种订阅发布模式
2 设置:
1 创建: var bus = new Vue() -- bus.$emit 发消息 -- bus.$on 收消息
2 发数据: methods -- bus.$emit("a1", data) 发送 data数据到 a1这个频道
3 收数据: mounted -- bus.$on("a1", (msg) => {
...}) 监听这个频道, 且执行对应的回调函数来, 接收该频道传来的数据
--------------------------------------------------------------------------------------
3 插槽 slot
1 作用: 在使用组件标签时可以插入一些普通标签或其他组件
2 使用场景: 封装(创建)一个组件的时候, 用于留给使用者的可设置的接口, 扩展了组件的多样性和增加了可复用性
3 具体说明
1 在创建组件的时候 -- 指定位置添加 <slot></slot> 标签
2 用户在使用组件标签时 -- 往里面插入的内容 -- 默认显示在这个标签的位置
3 当然如果插入内容中 -- 有设置具名插槽暗号的标签 -- 会显示在对应具名插槽的位置
4 插槽分类
1 匿名插槽 -- 在组件内通过 `<slot></slot>`标签接收所有包裹的 (非具名插槽)内容
2 具名插槽 -- 在组件内通过 `<slot name="box"></slot>` 接收组件标签命名插槽内容
5 使用
1 组件标签插入的内容
<p> 匿名插槽接收的内容 </p>
<p #s1> 具名 name==s1 的插槽接收的内容 </p> 各种写法-- v-slot:s1 -- #s1 -- slot="s1"
2 定义组件的插槽
<slot></slot> 匿名插槽
<slot name="s1"></slot> 具名插槽
3 注意 -- 用户插入组件标签的内容显示位置 -- 是由定义插槽的位置时决定的
4 动态组件
1 概念
1 可以给一个标签添加 is属性，最终会在这个标签的位置渲染指定组件
2 设置了 is属性的标签不会被渲染出来 (就是没渲染在DOM结构上)
3 语义化 -- vue提供了一个渲染动态组件的标签 <component> 说白了, 就是一个占位标签
4 还有一种切换组件的方式 -- 路由切换 -- 改变地址栏的地址，根据地址渲染不同的组件 (常用)
2 使用
1 <component :is="hh"> </component> hh==组件标签名 -- 通过改变is值来达到切换组件的效果
2 is属性值 -- 是子组件标签名 -- 动态更换属性值达到切换页面的效果 -- 切换组件的可时候配合 keep-alive -- 做一个缓存
5 组件相关知识
1 keep-alive -- 内置组件
1 概念
1 责任 -- 可以识别包裹在<keep-alive>标签中的组件 -- 在组件将要正常销毁时 -- 不进行销毁, 进行缓存
2 作用 -- 当路由切换到被缓存的组件时，不会重新创建，从缓存取出展示
3 作用 -- 主要用于保存组件的状态(数据)和避免重复渲染组件
4 理解 -- 被 keep-alive 缓存的组件激活时调用activated钩子函数
5 理解 -- 被 keep-alive 缓存的组件停用时调用deactivated钩子函数 -- 老陶的一些使用, 判断用户离开刷新页面
6 组件的正常切换就是 -- 创建销毁的一个过程
2 设置
1 <keep-alive> <router-view> </keep-alive> 相当于 <router-view>要渲染的组件都会背缓存下来
2 <keep-alive include="Home"> -- 只缓存 Home组件
3 <keep-alive exclude="About"> -- 不缓存 About组件
2 v-model 高级用法
1 理解 -- v-model = v-bind:value + v-on:input v-model == value 自定义属性 + @input自定义事件
2 组合 -- v-model="自定义属性值" -- 这个属性值会和自定义事件的发射的数据自动同步
3 涉及组件通信的 -- 某些情况使用起来很舒服 -- 但要注意是否合适