Vue组件的三要素

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

基本组件开发

创建一个.vue文件,其中包含templatescript以及style

<template>
  <div class="headComponent">
    {{{ msg }}
  </div>
</template>

<script>
export default {
    props:['data','type'],
    inheritAttrs: false,
    data(){
        return{
            msg:'',
        }
    }
}
</script>
<style scoped>

</style>

至此就完成一个基本的组件了,要想使用这个组件,就需要在其他js文件中引入并注册:

import Head from '../components/headComponent.vue'

组件之间的数据传递

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

父组件通过属性的形式向子组件传递数据,子组件使用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颠倒转换之后,实现了深拷贝,则可以互不影响。

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

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

handleSubmit(data){
    this.$emit('submitToParent', data)
}

父组件如何拿到子组件传递过来的数据?

<header @submitToParent="parentSubmit"></header>

methods: {
	parentSubmit(data){
    	// 父组件的业务逻辑
	}
}

3. 使用slot

一个通用组件,往往不能够适应所有应用场景,所以在封装组件的时候只需要完成组件 80% 的功能,剩下的 20% 让父组件通过 solt 解决。比如:某一个公共组件中有两个按钮,一个是“新增”,一个是“删除”,但是在另外的场景中使用这个组件时,两个按钮需要做的事情是不一样的,比如是“查看”和“修改”。所以,我们在封装组件的时候就不要直接写按钮了,而是在合适的位置放置一个slot,其实是一个占位的作用,给按钮的设置提前预留一个位置,然后在父组件中写入按钮即可。

子组件:

<div class="child-btn">
    <!-- 具名插槽 -->
    <slot name="button"></slot>
    <!-- 匿名插槽(每个组件只能有一个) -->
    <slot><slot>
</div>

父组件:

<child>
    <!-- 对应子组件中button的插槽 -->
    <button slot="button">slot按钮</button>
</child>

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

子组件:

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

父组件:

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

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>

上述例子中,首先在子组件添加 slot,并在子组件中定义了数组变量 heads 然后在父组件中以作用域 template 添加内容,其中 scope 是固有属性,它的值对应一个临时变量 props 而 props 将接收从父组件传递给子组件的参数 heads。

参考链接:
https://juejin.cn/post/6844903833898844174
https://juejin.cn/post/6844903821513064456
https://www.cnblogs.com/missshuanger/p/9140832.html#4552529
这篇介绍的很详细!!! https://www.cnblogs.com/xiaohuochai/p/7388866.html

Logo

前往低代码交流专区

更多推荐