Vue3的 Custom Block是什么？

Vue3的 Custom Block 是一个很酷的东西，它能够让你在Vue中创建自定义的HTML标记，就像这样：

<template>  
  <custom-block>  
    <p>这是自定义块的内容</p>  
  </custom-block>  
</template>  
  
<script>  
import {
      
       defineComponent } from 'vue';  
  
export default defineComponent({
      
        
  name: 'CustomBlock',  
  components: {
      
        
    // 在这里注册组件  
  },  
  props: {
      
        
    // 在这里定义组件的属性  
  },  
  setup(props, {
       
        attrs }) {
      
        
    // 在这里定义组件的行为  
    return () => {
      
        
      // 在这里返回组件的 VNode  
    };  
  },  
});  
</script>

相信你已经发现了，我们使用了标记，而不是

或这样的HTML标记。这个标记是我们自己定义的，它就是所谓的 Custom Block 。

那么， Custom Block 有什么好处呢？首先，它可以让我们以更清晰的方式表达组件的结构，让代码更易读易懂。其次，它可以让我们更容易地重构代码，例如把组件从一个项目移到另一个项目。最后，它可以让我们更容易地添加样式和行为，因为我们可以更自由地选择标记的属性和内容。

那么，如何创建一个 Custom Block 呢？首先，我们需要使用defineComponent函数来定义一个组件。这个函数接受一个组件选项对象作为参数，其中包含了组件的名称、注册方式、属性和行为等信息。在这个对象中，我们还需要定义一个setup函数，这个函数用于编写组件的行为逻辑，并返回一个包含组件 VNode 的函数。最后，我们需要在模板中使用我们定义的 Custom Block 标记，并在需要的地方注入这个组件。

下面是一个简单的例子，演示了如何创建一个简单的 Custom Block 组件：

<template>  
  <custom-block :text="message">  
    <p>{
   
   { message }}</p>  
  </custom-block>  
</template>  
  
<script>  
import {
      
       defineComponent } from 'vue';  
  
export default defineComponent({
      
        
  name: 'CustomBlock',  
  components: {
      
        
    // 在这里注册组件  
  },  
  props: {
      
        
    message: {
      
        
      type: String,  
      required: true,  
    },  
  },  
  setup(props, {
       
        attrs }) {
      
        
    // 在这里定义组件的行为  
    return () => {
      
        
      // 在这里返回组件的 VNode  
    };  
  },  
});  
</script>

在这个例子中，我们定义了一个CustomBlock组件，它有一个message属性，用于指定要显示的内容。在模板中，我们使用标记，并将message属性绑定到

标记上。在setup函数中，我们没有添加任何特殊的行为逻辑，只是返回了一个包含

标记的 VNode 。

当然，这只是一个非常简单的例子。在实际应用中，Custom Block 可以用作更复杂的组件结构的基础，从而创建更丰富、更具有可维护性的代码结构。

扫描二维码关注公众号，回复： 16525574 查看本文章

除了上面简单的例子外，Custom Block 还可以用于更复杂的组件结构。下面是一个稍微复杂的例子，用于创建一个带有标题和内容的 Custom Block 组件：

<template>  
  <custom-block :title="title" :content="content">  
    <h2>{
   
   { title }}</h2>  
    <div>{
   
   { content }}</div>  
  </custom-block>  
</template>  
  
<script>  
import {
      
       defineComponent } from 'vue';  
  
export default defineComponent({
      
        
  name: 'CustomBlock',  
  components: {
      
        
    // 在这里注册组件  
  },  
  props: {
      
        
    title: {
      
        
      type: String,  
      required: true,  
    },  
    content: {
      
        
      type: String,  
      required: true,  
    },  
  },  
  setup(props, {
       
        attrs }) {
      
        
    // 在这里定义组件的行为  
    return () => {
      
        
      // 在这里返回组件的 VNode  
    };  
  },  
});  
</script>

在这个例子中，我们定义了一个带有title和content属性的 Custom Block 组件。在模板中，我们使用<custom-block>标记，并将title和content属性分别绑定到<h2>和<div>标记上。在setup函数中，我们仍然没有添加任何特殊的行为逻辑，只是返回了一个包含<h2>和<div>标记的 VNode 。

这个例子稍微复杂了一点，但是它可以帮助你更好地理解 Custom Block 的用法和优势。你可以根据需要定义自己的 Custom Block 组件，使得代码更加清晰、易于维护。

Vue3的 Custom Block是什么？

猜你喜欢