Vue 组件 3

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 涉及组件通信的 -- 某些情况使用起来很舒服 -- 但要注意是否合适  

猜你喜欢

转载自blog.csdn.net/weixin_46178697/article/details/113988793

相关文章