vue-vue组件化编程

前端知识点 Vue-vue组件化编程
面试 面经 Vue
发布日期:   2022-09-07
文章字数:   1.7k
阅读时长:   6 分
阅读次数:  

第七章 深入理解上手Vue的组件化编程

1. 详解Vue组件化编程

简介：详解Vue组件化编程

  • 图解

    • 在使用 js 框架之前的代码管理

      image-20211223155529513

    • 在使用 vue 框架之后的代码管理

image-20211223152032231

  • 没使用组件思想构建项目的缺点

    • 代码关系混乱，不好维护

    • 代码复用率不高

  • 模块

    • 定义
      • 一般指一个 js 文件，提取公共或逻辑复杂的 js 代码
    • 作用
      • 复用 js 代码、提高代码的复用率

  • 模块化

    • 当项目中的 js 都用模块来编写，那这个项目就是模块化的

  • 组件

    • 定义
      • 实现局部功能、逻辑的代码合集（html、css、js、image、map4）

  • 组件化

    • 当项目中的功能或者页面都以组件的形式来去编写，那么这个项目就是组件化的

2. 详解组件的全局注册与局部注册

简介：详解组件的全局注册与局部注册

  • 全局注册

    • Vue.component

      Vue.component('button-counter', {
  data() {	// data必须是个函数, 如果是对象，则指向同一个地址
    return {
      count: 0,
    };
  },
  template: '<button v-on:click="count++">点击了 {{ count }} 次</button>',
});

    • 组件名的两中写法

      button-counter 

      ButtonCounter  //此写法直接在DOM引用时，只有button-counter才能生效

      示例

    • 组件的复用

    • data必须是个函数, 如果是对象，则指向同一个地址

    • 不写el选项（实现组件可复用，一个项目中所有的组件最终都由一个vm实例管理）

    组件结构

    组件结构解释

  • 局部注册

    • Vue.extend

      const xd = Vue.extend({
  data() {
    return {
      count: 0,
    };
  },
  template: '<button v-on:click="count++">点击了 {{ count }} 次</button>',
});

      new Vue({
  el: '#app',
  data: {
    name: '小滴课堂',
  },
  components: {
    xd, // 全写    xd:xd
  },
});

      局部注册

  • 组件的嵌套

组件嵌套

3. Vue脚手架开发必备的单文件组件

简介：深入理解单文件组件

  • 单文件组件

    • 结构

      <template>
  <div>{{ name }}</div>
</template>

    • 交互

      <script>
export default {
  data() {
    return { name: '你好，小滴课堂' };
  },
};
</script>

    • 样式

      <style>
div {
  color: red;
}
</style>

  • 重写案例

// HelloWord.vue
<template>
  <div>
    <h1 >{{ name }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return { name: "小滴课堂"};
  },
}

</script>

<style>
</style>

APP.vue 组件

// APP.vue

<template>
    <HelloWorld/>		// 3.插入组件
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";		// 1. 引入组件
export default {
  name: "App",
  components: {
   HelloWorld,		// 2. 注册组件
  },
};
</script>

<style>
</style>

引入子组件步骤

  1. 引入组件
  2. 注册组件
  3. 插入组件

4. 深入剖析Vue父子组件的传值上

简介：深入理解父子组件的传值

  • 父向子传值

    • props

      只接收 （第一种）

      props: ["xd"]

      限制类型 （第二种）

      props: { xd: String }

      限制类型，限制必要性，限制默认值d （第三种）

      props: {
  xd: {
    type: String,
    required: true,		// 父组件必须要传值  否则报错
    default:'你好',	   // 默认值
  },
},

    • 父向子传字符串

    父向子传字符串

    • 父向子传 非字符串

    父向子传非字符串

    • 注意
      • props的数据时单向的，只能从父组件传到子组件
      • props的数据不可更改，如果要更改需备份到data中做操作

修改内容方法

5. 深入剖析Vue父子组件的传值下

简介：深入理解父子组件的传值

  • 子向父传值

    • 父组件通过 props 传给子组件事件回调传值【第一种方法】

    传递过程

    • 自定义事件（@绑定）【第二种方法】

      // 父组件
<xd-home @myXd="dianji" />

      // 子组件
dianji_xd() {
  this.$emit("myXd", this.name);
},

    自定义事件

    • 自定义事件（ref绑定：灵活，延时效果）【第三种方法】

      // 父组件
<xd-home ref="child" />
  
mounted() {
  this.$refs.child.$on("myXd", this.dianji);   //this.dianji在methods声明或者用箭头函数
},

      // 子组件
methods: {
  dianji_xd() {
    this.$emit("myXd", this.name);
  },
},

      自定义事件 ref绑定

    • 自定义事件的解绑 （一般解绑事件放置在destroyed销毁周期函数中）

      this.$off()

自定义事件的解绑

6.【面试】必须掌握的任意组件间通讯（全局事件总线）

简介：详解非父子组件间的通讯

  • 兄弟组件的数据操作

    • 将一个子组件的数据放在父组件维护（状态提升）
    • 操作声明在父组件，传到另一个子组件就可实现兄弟组件间的数据操作
      • 示例： 子组件1删除子组件2中的数据

  • 任意组件的事件

    • 安装全局事件总线

      new Vue({
  ...
    beforeCreate(){
      Vue.prototype.$bus = this
  }
  ...
})

      安装全局事件总线

    • 在需要接收数据的组件绑定自定义事件

      methods:{
 xd(i){
   console.log(i)
 }
}
mounted(){
 this.$bus.$on('xx',this.xd)
}

    • 提供数据的组件

      this.$bus.$emit('xx',数据)

      组件

    • 解绑

      beforeDestroy() {
  this.$bus.$off();
},

    示例代码

7. 怎么使用Vue中的插槽？

简介：详解Vue中的插槽

  • 默认插槽

    • 定义

      • 父子组件通讯的一种方式，可以在子组件指定的节点插入html内容

    • 写法

      父组件

      <soltComponent>
  <span>小滴课堂</span>
</soltComponent>

      子组件

      <template>
  <div>
    <h1></h1>
    <p>
      <slot></slot>
    </p>
  </div>
</template>

      默认插槽

  • 具名插槽

    • 定义

      • 有多个html内容需要指定插入到子组件的对应节点

    • 写法

      父组件

      <soltComponent>
  <template v-slot:title>	// 推荐使用此写法
    <span>小滴课堂</span>       //  vue2 写法  <span slot="title">小滴课堂</span>   // vue3 弃用此写法
  </template>
  <template v-slot:website>
    <span>xdclass.net</span>
  </template>
</soltComponent>

      子组件

      <template>
  <div>
    <h1>
      <slot name="title"></slot>
    </h1>
    <p>
      <slot name="website"></slot>
    </p>
  </div>
</template>

    • 注意

      • v-slot:title只能写在 template 标签以及组件上，

      • 可以写成 slot='title' 但是此用法在vue3被弃用

  • 作用域插槽

    • 定义

      • 数据定义在子组件，但是数据需要在父组件的插槽中使用

    • 写法

      父组件

      <soltComponent>
  <template v-slot="{ list }">
    <li v-for="(i, index) in list" :key="index">{{ i }}</li>
  </template>
</soltComponent>

      子组件

      <template>
  <div>
    <slot :list="list"></slot>
  </div>
</template>

8. 实现Vue 组件中的复用功能—混入（mixin）

简介：详解混入实现复用功能

  • 混入

    • 定义

      • 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项

    • 写法

      • 局部混入

        • 定义个混入对象

          // mixin.js

export const myMixin = {  // 用export导出对象
  data() {
    return {
      xd: '小滴课堂',
    };
  },
  mounted() {
    console.log('hello from xdclass.net');
  },
};

        • 引用使用

          // 需要混入的组件

import { myMixin } from "../mixin";

mixins: [myMixin],

      • 全局混入

        • 定义个混入对象

        • 引入使用

          // main.js

import { myMixin } from "./mixin";

Vue.mixin(myMixin);

    • 注意

      • 当组件和混入对象含有同名选项时，这些选项将进行“合并”
      • 在选项发生冲突时以组件数据优先
      • 请谨慎使用全局混入，因为会使实例以及每个组件受影响
文章作者: Zetai Wei
文章链接: https://weizetai.github.io/2022/09/07/%E5%89%8D%E7%AB%AF/VUE/9-7%20vue-vue%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Zetai Wei !
前端知识点 Vue-vue组件化编程
赏
评论
  目录