组件注册

最新推荐文章于 2024-05-13 09:38:36 发布

LionKing0823

最新推荐文章于 2024-05-13 09:38:36 发布

阅读量265

点赞数

分类专栏： Vue.js

本文链接：https://blog.csdn.net/LionKing0823/article/details/89459086

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

组件注册

Vue.component(组建名称, 组件的配置)
在组件中使用components的配置项来表示

问题：
组件命名问题

组件命名和html原生标签冲突 Header Footer ----> header footer

大驼峰的写法

  Vue.componennt('ZhangJun',{
    template: '<div></div>'
  })

  <div id = "app">
    <!-- <ZhangJun></ZhangJun>   错的-->
    <zhang-jun></zhang-jun>
  </div>


  .box{
    background-color: red
  }

  box.style.backgroundColor = 'red'

组件通信王者级

注意：组件通信，无论效果是如何的， Vue都是单向数据流（组件之间的数据通信）

父子组件通信
- 绑定的是简单类型数据
  1. 父组件中定义数据，通过单向数据绑定的形式，将数据绑定在子组件身上，属性是自定义属性，
  2. 子组件通过配置项中的props接收数据， props可以是一个数组，数组中放的是自定义属性名称
  3. 那么这个自定义属性可以向data中的数据一样直接在子组件模板中使用
  4. 父组件中数据一旦修改，子组件数据就会修改，那么这也就是单项数据流

子父通信（效果上像，间接的使用了父组件的东西）【不推荐大家使用】

绑定复杂数据类型 --------
1. 父组件中的数据是一复杂数据类型，那么父组件绑定数据的时候，给子组件的是一个引用地址
2. 子组件可以通过这个引用地址，修改这个数据
3. 效果上像，子组件和父组件通信了，违背单项数据流
父组件可以传递一个方法给子组件
1. 父组件定义方法，然后将这个方法通过单向数据绑定的形式传递给子组件
2. 子组件通过props属性接收，然后通过 @click = “方法名”

通过自定义事件来实现通信

父组件中定义数据和方法（方法时用来操作数据的）
在子组件身上绑定自定义事件

子组件定义方法，在这个方法中通过 this.$emit(eventType,实际参数) 来调用自定义事件的事件处理程序

  <!-- html结构代码 -->
  <div id="app">
    <King></King>
  </div>
  <template id="king">
      <div>
        <h3> I am king </h3>
        <!-- <People v-on: get = "get"></People> -->
        <p> 国库中有：{{ gk }} 钱 </p>
        <People @get = "get"></People>
      </div>
  </template>
  <template id="people">
    <div>
      <h3> I am people </h3>
      <button @click = "give"> 交钱 </button>
    </div>
  </template>

<!-- js代码 -->
  Vue.component('King',{
    template: '#king',
    data () {
      return {
        gk: 0
      }
    },
    methods: {
      get( value ){
        this.gk += value 
      }
    }
  })
  Vue.component('people',{
    template: '#people',

    data () {
      return {
        money: 2000
      }
    },
    methods: {
      give () {
        this.$emit('get', this.money/2)
      }
    }
  })
  new Vue({
    el: '#app'
  })

非父子组件通信
- 使用ref来绑定组件，（注意：ref也可以绑定DOM元素）【ref链】
  - 在父组件的模板中，使用ref = refName 绑定在两个兄弟组件身上
  - 在任意一个子组件中，就可以通过 this. $p a r e n t .$ refs.refName 就可以获得另一个子组件了，同时这个自组件身上的数据和方法同样也得到了
- 通过事件总线（bus）
  - 它是通过事件的发布（声明），以及事件的订阅（触发）来做的
  - 首先在js中创建一个bus对象（vm）
```
  var bus = new Vue()
```
  - 在Count组件中定义数据，和修改数据的方法
  - 在Count组件中通过 created 钩子，进行bus事件的发布
```
    created: {
      bus.$on('add',this.addCount)
    }
```
  - 在MyButton组件的方法中通过 bus进行事件的订阅
```
    increment () {
      bus.$emit( 'add' )
    }
```
多组件状态共享
- 使用 Vue-Router
- 使用状态管理工具 Vuex

组件生命周期王者级

钩子函数，就是options里面的key, 它的值是函数
钩子函数写在其他配置项的后面

组件的有哪几个阶段？
- 初始化阶段
- 运行中阶段
- 销毁阶段
初始化阶段
- 分为两个大阶段，每一个大阶段包含两个生命周期钩子函数 ---- 生命周期 --》人的一声钩子函数 --》（人在某个阶段做得一些事情，这些事情是自动触发）
- 有那四个钩子函数呢？每个钩子函数有什么功能嗯？项目中有什么用呢？
  1. beforeCreate ---------------- 出生准备阶段
    - 表示组件创建前的准备工作，为事件的发布订阅和生命周期的开始做初始化
    - 这个钩子函数中
      - 数据拿不到，真实DOM也拿不到
    - 这个钩子在项目中我们没有什么实际用途
  2. created ---------------- 出生
    - 表示组件创建结束
    - 这个钩子函数中
      - 数据拿到了，但是真实DOM没有拿到
    - 这个钩子函数在项目
      - 数据请求，然后可以进行一次默认数据的修改
  3. beforeMount ---------------- 搭载阶段
    - 表示组件装载前的准备工作
      - 判断 el选项有没有，判断 template选项有没有，如果没有，那么需要手动装载
      - 如果有，那么通过render函数进行模板的渲染（没有做的，正要进行， VDOM）
    - 这个钩子函数中
      - 数据拿到了，真实DOM没有拿到
    - 这个钩子函数在项目中，
      - 数据请求，它也可以进行一次数据修改
  4. mounted --------- 搭载完成
    - 表示组件装载结束，就是我们可以在视图中看到了
    - 这个钩子函数中
      - 数据拿到了，真实DOM也拿到了
    - 这个钩子函数在项目：
      - DOM操作就可以进行了，第三方库的实例化

总结：由上对比，我们可以知道，数据请求越提前越好一些， created常用于数据的请求和数据的修改，第三方库的实例化常在mounted中进行书写

LionKing0823

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
组件注册

组件注册Vue.component(组建名称, 组件的配置)在组件中使用components的配置项来表示问题：组件命名问题组件命名和html原生标签冲突 Header Footer ----> header footer大驼峰的写法 Vue.componennt('ZhangJun',{ template: '<div&...
复制链接

扫一扫