vue virtual dom、Render、h関数の使用

ほとんどの状況の目的：htmlを記述できない場所では、jsの関数でhtmlを彼に返す必要があります。

tip：要讲的就是代码里的h()；至于什么是虚拟dom，是面试必懂的东西，这里不赘述了
建议先看一眼官方文档，很多文章直接复制官方文档的，lj文章，看的浪费时间

使用法：

createElement（）メソッド、エイリアスはh（）、3つのパラメーターがあり、最初のパラメーターは必須です。

くるみ：

h（ "p"、{style： "color：red"}、 "この予約デポジットアクティビティをすぐに終了しますか？"）

パラメータ1：文字列、オブジェクト、関数を受け入れる

文字列を使用する場合は、「div」タグであるラベル名にするか、カスタムコンポーネント名にすることができます。
関数を使用する場合は、文字列を返すだけです。

パラメータ2：オブジェクトまたは配列の受信

受信配列は、サブコンポーネントを設定するためのものです。たとえば、divにスパンを入れたいと思います。これは、h（）にもh（）があり、内部のhが配列に配置されていることを意味します。

 h( 'div',
   [ h(),h() ]
 )

これはあなたがオブジェクトを使用する方法です、コードはより直接的です

{
    
    
  'class': {
    
    
     // 和`v-bind:class`一样的API
  },
  style: {
    
    
     // 和`v-bind:style`一样的API
  },
  attrs: {
    
    
     // 正常的 html 特性
  },
  props: {
    
    
    name:this.name   //用于从外面接收参数
  },
  on: {
    
    
    // 事件监听器基于on
    // 不再支持如 `v-on:keyup.enter` 修饰器，需手动匹配 keyCode
    //比如设置方法（一般是新建组件时候用到）
    mymethod() {
    
     console.log('w de 函数')}
    click: () => {
    
     console.log('点击事件')  }
    },
  slot: '', // 如果组件是其他组件的子组件，需为 slot 指定名称
  // 其他特殊顶层属性
  key: '',
  ref: ''
}

たとえば、会社でそのような要求に応えるとき、要素ヘッダーにヒントを追加します

ここに画像の説明を挿入

<el-table-column label="剩余补课次数" :render-header="renderHeader" >
            
</el-table-column>

renderHeader (h, {
    
     column }) {
    
      // { column }是element函数参数
      let serviceContent = [
        h(
          'div',
          {
    
    
            slot: "content",
          },
          "剩余一对一补课次数/剩余插班补课次数"
        )
      ]
      return h("div", [
        h("span", column.label),
        h(
          "el-tooltip",
          {
    
    
            props: {
    
    
              placement: "top"
            }
          },
          [
            serviceContent,
            h("i", {
    
    
              class: "el-icon-question",
              style: "color: #ffd737;font-size: 16px;margin-left: 10px"
            })
          ]
        )
      ]);
    }

要素によって公式に提供される栗もあります、あなたはあなた自身で見ることができますここに画像の説明を挿入