Vue 封装组件以及插槽的使用

原创于 2024-09-04 16:43:57 发布 · 1.4k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

Vue 专栏收录该内容

7 篇文章

订阅专栏

`Vue` 封装组件插槽的使用

封装组件

在 Vue 开发中，不可避免的需要封装一些常用的组件，比如 form 组件、 dialog 组件等等。

封装组件的步骤如下：

创建一个 Vue 组件文件，文件名以 xxx.vue 命名，比如 my-form.vue；
在组件的 template 标签中，使用 slot 插槽来定义组件的结构；
在组件的 script 标签中，定义组件的 props 和 data；
在组件的 script 标签中，定义组件的 methods；
在组件的 script 标签中，定义组件的 created 钩子函数，在这里调用 props 和 data 的初始化方法；
在组件的 script 标签中，定义组件的 template 标签，在这里使用 slot 插槽来渲染组件的结构；

组件的使用

在使用组件时，需要在父组件的 template 标签中，使用 <my-form> 标签来引用组件，并通过 props 传递数据。

<template>
  <div>
    <h1>父组件</h1>
    <my-form :form-data="formData"></my-form>
  </div>
</template>

<script>
import myForm from './my-form.vue'

export default {
  name: 'Parent',
  components: {
    myForm
  },
  data() {
    return {
      formData: {
        name: '张三',
        age: 20
      }
    }
  }
}
</script>

在 my-form.vue 组件中，通过 slot 插槽来定义组件的结构，并在 script 标签中定义组件的 props 和 data。

<template>
  <div>
    <h2>子组件</h2>
    <form>
      <label>
        姓名：
        <input type="text" v-model="name">
      </label>
      <label>
        年龄：
        <input type="number" v-model="age">
      </label>
      <button type="button" @click="handleSubmit">提交</button>
    </form>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'myForm',
  props: {
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      name: this.formData.name,
      age: this.formData.age
    }
  },
  methods: {
    handleSubmit() {
      console.log(this.name, this.age)
    }
  }
}
</script>

组件的插槽

##　插槽：在组件的 template 标签中，使用 <slot> 标签来定义组件的结构，并在父组件中通过 slot 插槽来渲染组件的结构。

插槽的作用：

组件的结构可以由父组件来自定义，这样可以实现组件的复用；
父组件可以向子组件传递数据，子组件可以根据数据来渲染组件的结构；

插槽的使用：

在父组件的 template 标签中，使用 <slot> 标签来定义组件的结构；
在子组件的 template 标签中，使用 <slot> 标签来渲染父组件传递过来的结构；

###　插槽的分类

默认插槽：没有指定名称的插槽，只能有一个；
具名插槽：指定名称的插槽，可以有多个；

具名插槽的使用：

在父组件的 template 标签中，使用 <slot> 标签来定义组件的结构；
在子组件的 template 标签中，使用 <slot> 标签来渲染父组件传递过来的结构；
在父组件的 script 标签中，定义 slot 名称；
在子组件的 script 标签中，使用 slot 名称来渲染父组件传递过来的结构；

####　在子组件的定义，使用具名插槽

<template>
  <div>
    <h2>子组件</h2>
    <form>
      <label>
        姓名：
        <input type="text" v-model="name">
      </label>
      <label>
        年龄：
        <input type="number" v-model="age">
      </label>
      <button type="button" @click="handleSubmit">提交</button>
      <slot name="footer"></slot>
    </form>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'myForm',
  props: {
    formData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      name: this.formData.name,
      age: this.formData.age
    }
  },
  methods: {
    handleSubmit() {
      console.log(this.name, this.age)
    }
  }
}
</script>

####　在父组件的使用

<template>
  <div>
    <h1>父组件</h1>
    <my-form :form-data="formData">
      <template slot="footer">
        <p>父组件自定义的脚部</p>
      </template>
    </my-form>
  </div>
</template>


<script>
import myForm from './my-form.vue'

export default {
  name: 'Parent',
  components: {
    myForm
  },
  data() {
    return {
      formData: {
        name: '张三',
        age: 20
      }
    }
  }
}
</script>