Vue命令式组件的编写与应用

Felix_D
619 阅读3分钟

1.引言

Vue.js中的一个有趣话题——命令式组件。有时候我们在Vue模板里写组件，就像是在玩搭积木，每个积木都有固定的形状和位置？虽然这样很直观，但有时候我们可能需要更多的自由度来发挥创意。

这就是命令式组件登场的时候了。它们就像是你的个人DJ，在你需要的时候播放你想要的音乐。不需要预先在模板中定义，你可以直接在JavaScript中调用它们，就像是调用一个函数一样简单。这种方式不仅让组件的使用变得更加灵活，还能让你的代码看起来更加干净利落。

2.传统的组件

假设我们现在需要编写一个MessageBox组件）

在传统的组件定义中，我们通常需要这么几步：

接收父组件的属性值 接收自定义事件 组件的结构布局，样式 给组件绑定不要的事件 最后在使用组件的时候，我们还得在父组件中，在模板中渲染出来，如果有时候我们嘚控制子组件的显示与否，还得添加控制的字段，总之就是有一些情况下很麻烦。

下这样一个MessageBox组件

image.png

部分代码：

<template>
  <div class="message-box" v-if="show">
    <div class="inner">
      <div :class="['header', type]">
        <h1>{{ title }}</h1>
      </div>
      <div class="content">
        <p>
          {{ content }}
        </p>
        <button @click="closeMessageBox" :class="['btn', type]">{{ btntext }}</button>
      </div>
    </div>
  </div>
</template>
 
<script setup>
const props = defineProps({
  title: {
    type: String,
    default: 'Title'
  },
  btntext: {
    type: String,
    default: '确定'
  },
  content: {
    type: String,
    default: 'Content'
  },
  show: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'primary',
    validate: (val) => ['primary', 'success', 'warning', 'error'].includes(val)
  }
})
 
const emits = defineEmits(['handler-visible'])
 
const closeMessageBox = () => {
  emits('handler-visible', false)
}
</script>
 
<style lang="scss" scoped>
.message-box {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .5);
 
  .inner {
    width: 300px;
    height: 200px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    transform: translate(-50%, -50%);
 
    .content {
      margin-top: 20px;
 
      .btn {
        border: none;
        outline: none;
        padding: 6px 15px;
        border-radius: 5px;
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
    }
 
    .header {
      height: 38px;
      line-height: 38px;
      padding: 0 10px;
    }
 
    .primary {
      background-color: skyblue;
      color: #fff;
    }
 
    .success {
      background-color: green;
      color: #fff;
    }
 
    .warning {
      background-color: yellow;
      color: #fff;
    }
 
    .error {
      background-color: red;
      color: #fff;
    }
  }
}
</style>

使用时需要在父组件里应用

<template>
  <MessageBox title="标题" type="primary" btntext="close" @handler-visible="setVisible" :show="isVisible">
	This is a messagebox
  </MessageBox>
  <button class="btn" @click="setVisible">显示MessageBox</button>
</template>

<script setup>
import { ref } from 'vue'
import MessageBox from './components/MessageBox.vue'

const isVisible = ref(false);
const setVisible = () => {
  isVisible.value = true;
}
</script>

<style scopde>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.btn {
	background-color: skyblue;
	border: none;
	padding: 15px;
	color: #fff;
	border-radius: 20px;
}
</style>

3.命令式组件

如果遇到很多这种组件，就会感觉很麻烦，又得定义属性，又得设置自定义事件的回调函数，子组件还得接收。

这时候命令式组件的优势就体现出来了，他能让我们像调用函数的api一样，很轻松的就能实现组件的渲染。

在父组件中的代码就可以精简成这样：

<template>
  <div>
    <button @click="setVisible">显示MessageBox</button>
  </div>
</template>
 
<script setup>
import MessageBox from '../components/MessageBox';
console.log(MessageBox);
const setVisible = () => {
  MessageBox.alert({
    title: '标题',
    type: 'primary',
    btntext: 'close',
    content: '这是主要的内容信息'
  }, () => {
    console.log('关闭了')
  })
}
</script>

子组件做修改

<template>
  <div class="message-box">
    <div class="inner">
      <div :class="['header', type]">
        <h1>{{ title }}</h1>
      </div>
      <div class="content">
        <p>
          {{ content }}
        </p>
        <button @click="close" :class="['btn', type]">{{ btntext }}</button>
      </div>
    </div>
  </div>
</template>
 
<script setup>
const props = defineProps({
  title: {
    type: String,
    default: 'Title'
  },
  btntext: {
    type: String,
    default: '确定'
  },
  content: {
    type: String,
    default: 'Content'
  },
  type: {
    type: String,
    default: 'primary',
    validate: (val) => ['primary', 'success', 'warning', 'error'].includes(val)
  },
  close: Function
})

</script>

这时候我们需要新添加一个js文件，可以定义在同文件夹目录下，index.js，在组件中引入：import MessageBox from '../components/MessageBox';默认引入的是js文件，代码如下

import MessageBox from './index.vue'
import { createApp } from 'vue'
MessageBox.alert = (props, callback) => {
  const container = document.createElement('div')
 
  const messageBox = createApp(MessageBox, { ...props, close })
  open()
  function open() {
    messageBox.mount(container)
    document.body.appendChild(container)
  }
 
  function close() {
    messageBox.unmount(container)
    document.body.removeChild(container)
    if (typeof callback === 'function') {
      callback()
    }
  }
}
 
export default MessageBox

在父组件中使用

<template>
  <div>
    <button @click="setVisible">显示MessageBox</button>
  </div>
</template>
 
<script setup>
import MessageBox from '../components/MessageBox';
console.log(MessageBox);
const setVisible = () => {
  MessageBox.alert({
    title: '标题',
    type: 'primary',
    btntext: 'close',
    content: '这是主要的内容信息'
  }, () => {
    console.log('关闭了')
  })
}
</script>

命令式组件的核心优势在于它们提供了更大的控制灵活性，允许开发者根据应用的具体需求和交互逻辑来动态地创建和销毁组件实例。这种方式特别适用于那些不适合在模板中静态声明的组件使用场景。

avatar
文章
阅读
粉丝