Vue3のカスタムブロックとは何ですか?

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 タグ。このマークは私たちが独自に定義した、いわゆるカスタムブロックです。

では、カスタムブロックにはどのような利点があるのでしょうか? まず、コンポーネントの構造をより明確に表現できるようになり、コードが読みやすく、理解しやすくなります。2 番目に、コンポーネントをあるプロジェクトから別のプロジェクトに移動するなど、コードをより簡単にリファクタリングできるようになります。最後に、マークアップの属性とコンテンツをより自由に選択できるため、スタイルと動作の追加が容易になります。

では、カスタムブロックを作成するにはどうすればよいでしょうか? まず、defineComponent 関数を使用してコンポーネントを定義する必要があります。この関数は、コンポーネントの名前、登録方法、プロパティ、動作などの情報を含むコンポーネントオプションオブジェクトをパラメータとして受け取ります。このオブジェクトでは、セットアップ関数を定義する必要もあります。この関数は、コンポーネントの動作ロジックを記述するために使用され、コンポーネント VNode を含む関数を返します。最後に、テンプレートで定義したカスタムブロックタグを使用し、必要な場所にこのコンポーネントを挿入する必要があります。

以下に、単純なカスタムブロックコンポーネントを作成する方法を示す簡単な例を示します。

<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>

この例では、表示するコンテンツを指定する message 属性を持つ CustomBlock コンポーネントを定義します。テンプレートではタグを使用し、メッセージ属性をバインドします。

マークを付けます。setup 関数では、特別な動作ロジックを追加せず、単に

マークされた VNode。

もちろん、これは非常に単純な例にすぎません。実際のアプリケーションでは、カスタムブロックをより複雑なコンポーネント構造の基礎として使用して、より豊富で保守しやすいコード構造を作成できます。

上記の単純な例に加えて、カスタムブロックはより複雑なコンポーネント構造にも使用できます。タイトルとコンテンツを含むカスタムブロックコンポーネントを作成する、もう少し複雑な例を次に示します。

<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>

この例では、タイトルとコンテンツのプロパティを持つカスタムブロックコンポーネントを定義します。テンプレートでは、<custom-block>タグを使用し、title 属性と content 属性をそれぞれタグとタグにバインドし<h2>ます<div>。setup 関数では、まだ特別な動作ロジックを追加しておらず、それを含む VNode を返し、<h2>それ<div>をマークしているだけです。

この例は少し複雑ですが、カスタムブロックの使用法と利点をより深く理解するのに役立ちます。必要に応じて独自のカスタムブロックコンポーネントを定義して、コードをより明確にし、保守しやすくすることができます。

Vue3のカスタムブロックとは何ですか?

おすすめ