Vue组件化开发--公共组件的封装

发布时间：2023-04-29 文章分类：WEB开发, 电脑百科 投稿人：王小丽 字号： 默认 | 大 | 超大 打印

目录

为什么要封装组件

应用场景

vue自己封装组件（局部、全局） 

Vue组件的三要素

①全局组件

1）方式：

 2）示例：

②局部组件

1）方式：

2）示例：

命名规范：（注意）

脚手架vue-cli中的组件

父传子（props）

通过 $on 传递父组件方法

$parent获取父组件然后使用父组件中的数据（不推荐）

通过$emit传递父组件数据 (推荐) 

refs获取

组件样式修改 样式穿透 

插件使用：slot

为什么要封装组件

用vue开发的项目，都是采用组件化的思想开发的。

一般在搭建项目的时候，会创建一个views目录、一个commen目录和一个feature目录。

组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性低等问题。

使用组件的好处

应用场景

项目中很多模块经常会复用：侧边导航组件、分页、文件下载、项目中常用的 echarts图表的封装（比如折线图、柱状图等），或者一些后台管理、菜单管理中很多可复用组件，表单之类的。

封装组件需要考虑复用性：

vue自己封装组件（局部、全局） 

封闭性：当在组件定义好外部不能修改；

开放性：将动态内容和组件通讯方式进行传递数据保证组件可扩展性；

Vue组件的三要素

1. props参数
2. slot定制插槽
3. event自定义事件

①全局组件

1）方式：

可以在main.js中注册成全局组件。

import Bread from '@/layout/bread';// 引入
Vue.component("Bread",Bread);// 全局注册

 2）示例：

引用全局组件my-header

<body>
  <div id="main1">
    <!-- 正常模板解析的时候，不会将自定义标签解读出来，而是将自己定义组件里的参数解读出来，也就是下面template中的h1标签 -->
    <my-header></my-header>
  </div>
   <div id="main2">
     <!-- 自定义组件具有复用性 -->
    <my-header></my-header>
  </div>
   <div id="main3">
    <my-header></my-header>
  </div>
</body>

注册全局组件my-header

//全局组件：在任何地方，任何方式，任何地点都可以使用的标签组件
vue.component("my-header", {
    	// h1标签是我们在自定义主键里面写的参数的标签
    	template: '<h1>标题{{msg}}</h1>',
    	data(){
    	   return {msg:100}
    	}
    })
	new Vue({
	  	el: '#main'
	  });
	  new Vue({
	  	el: '#main2'
	  });
	  new Vue({
	  	el: '#main3'
	  });

②局部组件

1）方式：

components: {
    Position: () => import("@/layout/position"),
    UploadIDCard
},

注册后，UploadIDCard可以当做一个标签使用。（局部组件）。

2）示例：

局部组件：只是在我们规定的范围之内才会生效。

 <body>
    <div id="main">
      <my-header></my-header>
      <my-header></my-header>
    </div>
  </body>
  new Vue({
    	el: '#main',
    	components: {
    		"my-header": {
    		template: '<h1>标题{{vue}}</h1>'
    		}
    	}
    })

命名规范：（注意）

  • 当使用 kebab-case(中划线命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如<my-component-name>
  • 当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。 也就是说<my-component-name>和<MyComponentName> 都是可接受的。注意，尽管如此，直接在 DOM(即非字符串的模板) 中使用时只有kebab-case 是有效的。
  • 总结：中划线命名在使用时必须保持命名一致，而驼峰命名在使用时既可以用驼峰也可以用中划线。
//中划线 使用语法： <my-component-name>`
Vue.component('my-component-name', { /* ... */ })
//驼峰  使用语法：<my-component-name> `和` <MyComponentName>`都可以
Vue.component('MyComponentName', { /* ... */ })

脚手架vue-cli中的组件

组件之间的数据传递
我们一般通过脚手架vue-cli开发项目，每个 .vue单文件就是一个组件。在父组件中使用import 导入一个子组件，并在components中注册子组件，子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用$emit方法触发自定义事件传递参数。


父传子（props）

prop 的定义应该尽量详细，至少需要指定其类型

父组件通过属性的形式向子组件传递数据，子组件使用props接收数据，但是通用组件的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则，即：

props: {
    propA: Number,  // 基础类型检测 (`null` 意思是任何类型都可以)
    propB: [String, Number],   // 多种类型
    propC: {  // 必传且是字符串
      type: String,
      required: true
    },
    propD: {   // 数字，有默认值
      type: Number,
      default: 100
    },
    propE: {   // 数组/对象的默认值应当由一个工厂函数返回
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    propF: {   // 自定义验证函数
      validator: function (value) {
        return value > 10
      }
    }
  }

由于存在一个单项数据流的问题，父组件传递给子组件的数据不要直接修改，因为会将父组件中的数据也修改，当这个数据也传入其他组件的时候就会出问题了。vue2.5已经针对 props 做出优化，这个问题已经不存在了 如果一定需要有这样的操作，可以这么写：

let copyData = JSON.parse(JSON.stringify(this.data))

为什么不直接写 let myData = this.data 呢？ 因为直接赋值，对于对象和数组而言只是浅拷贝，指向的是同一个内存地址，其中一个改变另一个也会改变。而通过 JSON颠倒转换之后，实现了深拷贝，则可以互不影响。

<!-- 父组件 -->
<template>
    <div>
        <my-child :parentMessage="parentMessage"></my-child>
    </div>
</template>
<script>
    import MyChild from '@components/common/MyChild'
    export default {
        components: {
            MyChild
        },
        data() {
            return {
                parentMessage: "我是来自父组件的消息"
            }
        }
    }
</script>

<!-- 子组件 -->
<template>
    <div>
        <span>{{ parentMessage }}</span>
    </div>
</template>
<script>
    export default {
        props: {
            parentMessage: {
                type: String,
                default: '默认显示的信息'
                // require: true // 必填
            }
        }
    }
</script>

通过 $on 传递父组件方法

通过$on传递父组件方法是组件通信中常用的方法传递方式。它可以与通过props传递方法达到相同的效果。相比于props传递function,它更加的直观和显示的表现出了调用关系

<!-- 父组件 -->
<template>
    <div>
        <my-child @childEvent="parentMethod"></my-child>
    </div>
</template>
<script>
    import MyChild from '@components/common/MyChild'
    export default {
        components: {
            MyChild,
        },
        data() {
            return {
                parentMessage: '我是来自父组件的消息',
            }
        },
        methods: {
            parentMethod() {
                alert(this.parentMessage)
            }
        }
    }
</script>

<!-- 子组件 -->
<template>
    <div>
        <h3>子组件</h3>
    </div>
</template>
<script>
    export default{
        mounted() {
            this.$emit('childEvent')
        }
    }
</script>

$parent获取父组件然后使用父组件中的数据（不推荐）

准确来说这种方式并不属于数据的传递而是一种主动的查找。父组件并没有主动的传递数据给子组件，而是子组件通过与父组件的关联关系，获取了父组件的数据。
该方法虽然能实现获取父组件中的数据但是不推荐这种方式，因为vue提倡单向数据流，只有父组件交给子组件的数据子组件才有使用的权限，不允许子组件私自获取父组件的数据进行使用。在父与子的关系中子应当是处于一种被动关系

通过$emit传递父组件数据 (推荐) 

子组件向父组件中传递数据

子组件向父组件中传递数据：触发父组件方法,并传递参数data到父组件

与父组件到子组件通讯中的$on配套使用，可以向父组件中触发的方法传递参数供父组件使用

<!-- 父组件 -->
<template>
    <div>
        <my-child @childEvent="parentMethod"></my-child>
    </div>
</template>
<script>
    import MyChild from '@components/common/MyChild'
    export default {
        components: {
            MyChild
        },
        data() {
            return {
                parentMessage: '我是来自父组件的消息'
            }
        },
        methods: {
            parentMethod({ name, age }) {
                console.log(this.parentMessage, name, age)
            }
        }
    }
</script>

<!-- 子组件 -->
<template>
    <div>
        <h3>子组件</h3>
    </div>
</template>
<script>
    export default {
        mounted() {
            this.$emit('childEvent', { name: 'zhangsan', age:  10 })
        }
    }
</script>

refs获取

可以通过在子组件添加ref属性，然后可以通过ref属性名称获取到子组件的实例。准确来说这种方式和this.$parent
一样并不属于数据的传递而是一种主动的查找。

尽量避免使用这种方式。因为在父子组件通信的过程中。父组件是处于高位是拥有控制权，而子组件在多数情况下应该为纯视图组件，只负责视图的展示和自身视图的逻辑操作。对外交互的权利应该由父组件来控制。所以应当由父组件传递视图数据给子组件，子组件负责展示。而子组件的对外交互通过$emit触发父组件中相应的方法，再由父组件处理相应逻辑。

<!-- 父组件 -->
<template>
    <div>
        <my-child ref="child"></my-child>
    </div>
</template>
<script>
    import MyChild from '@components/common/MyChild'
    export default {
        components: {
            MyChild
        },
        mounted() {
            console.log(this.$refs['child'].getData());
        }
    }
</script>

<!-- 子组件 -->
<script>
    export default {
        methods: {
            getData() {
                // do something...
            }
        }
    }
</script>

组件样式修改 样式穿透 

sass中语法
有些像sass之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/操作符取而代之——这是一个>>>的别名，同样可以正常工作

<style scoped>
    .a /deep/ .b { /* ... */ }
</style>

插件使用：slot

一个通用组件，往往不能够适应所有应用场景，所以在封装组件的时候只需要完成组件 80% 的功能，剩下的 20% 让父组件通过 solt 解决。solt 起到一个占位的作用，给按钮的设置提前预留一个位置，然后在父组件中写入按钮即可。

在开发通用组件的时候，只要不是独立性很强的组件最好是都加一个slot。并且，开发过程中，常常需要在子组件内添加新的内容，这时候可以在子组件内部留一个或者多个插口，然后在调用这个子组件的时候加入内容，添加的内容就会分发到对应的 slot 中：

父组件
<head-component>
	<h2>不具名插槽</h2>
	<h2 slot="s1">这里对应的是s1插口</h2>
	<h2 slot="s2">这里对应的是s2插口</h2>
</head-component>

子组件
<template>
  <div class="headComponent">
    <h3>这是一个头部组件</h3>
    <slot></slot>
    <slot name="s1"></slot>
    <slot name="s2"></slot>
  </div>
</template>

slot 中还可以作为一个作用域，在子组件中定义变量，然后在父组件中自定义渲染的方式：（项目中使用的比较多，vue+elementUI中ajax获取数据显示在表格中，很多时候每一条数据不是直接显示的，需要做一些额外的处理）

子组件
<template>
  <div class="headComponent">
    <h3>这是一个头部组件</h3>
    <slot name="head" v-for="head in heads" :text="head.text"></slot>
  </div>
</template>

父组件
<head-component>
	<template slot="head" scope="props">
		<li> {{ props.text }} </li>
	</template>
</head-component>

参考链接：vue组件化开发_star@星空的博客-CSDN博客

Vue公共组件的封装_Milly_Liu的博客-CSDN博客_vue公共组件的封装

vue组件化开发_star@星空的博客-CSDN博客

标签 , ,