我們可以直接建立x/tsx檔案

這次的專案結構是這樣的：

在檔案裡這麼使用

// index.vue
<template>
  <div class="wrapper">
    <Common :opt="list" />
  </div>
</template>
 
<script lang="ts">
import { Component,Vue } from "vue-property-decorator";
import Common from "./components/Common";

@Component({
  name: "App",components: {
    Common,},})
export default class App extends Vue {
  private list = ["我要去淘寶","我要去百度","我要去京東"];
}
</script>

tsx這麼寫

import { CreateElement } from 'vue';
import { Component,Vue,Prop } from 'vue-property-decorator';

@Component({
    name: 'Common'
})
export default class Common extends Vue {
    @Prop(Object) opt!: any[]

    render(h: CreateElement) {
        return <span>
            {
                this.opt.map((it) => {
                    return <span style="marginRight:10
 
px">{it}</span>
                })
            }
        </span>
    }
}

在來看一下頁面

可能有心者注意到了 我還引用了一個CreateElement，這是幹嘛的呢。這玩意叫渲染函式。不喜歡讀vue那麼大串的文件的兄弟看這裡。簡單解釋：這個東西可以渲染一個vnode節點。它比模板更接近編譯器。什麼意思呢？意思就是模板語法也會編譯成渲染函式。所以我們直接用渲染函式不就相當於節省了模板語法到渲染函式的過程。四捨五入專案效能又是一個大的提升！

簡單介紹一下傳參：

第一個引數: {String | Object

第二個引數: Object 一個與模板中 attribute 對應的資料物件。

第三個引數: {String | Array} 文字節點或子級虛擬節點 (VNodes)。

渲染函式給vue帶來了很多的靈活性，以前你想自定義在子元件裡插入東西，得寫一大堆的插槽<slot> 。有了渲染函式我們可以這麼玩。

// 改造一下上面的index.vue的data

  private list = [
    { render: () => ["a",{ style: { color: "red" } },"我要去淘寶"] },{ render: () => ["a",{ style: { color: "green" } },"我要去京東"] },{ style: { color: "pink" } },"我要去百度"] },];

tsx中這麼寫：

  {
                this.opt.map((it) => {
                    return h(...it.render())
                })
          客棧  }

就可以渲染出花裡胡哨的頁面了

我們還可以這麼玩：

// tsx改造
<span>
            {
                this.opt.map((it) => {
                    return it.render(h)
                })
            }
</span>


http://www.cppcns.com在index.vue頁面我們就可以這麼玩：
// index.vue
private list = [
    {
      render: (h: CreateElement) =>
        h("a",{ style: { color: "red",marginRight: "5px" } },"我要去淘寶"),{
      render: (h: CreateElement) =>
        h("a",{ style: { color: "green","我要去京東"),{http://www.cppcns.com style: { color: "pink","我要去百度"),];

結果也是同樣的花哨

我們同樣可以渲染亂七八糟的標籤！

// index.vue改造
 {
      render: (h: CreateElement) =>
        h(
          "h1",{
            style: { color: "green",marginRight: "5px" },"我要去京東"
        ),

我們可以隨心所欲的在渲染函式中定義事件：

// index.vue
privaxkAxsLte list = [
   {
      render: (h: CreateElement) =>
        h(
          "a",{
            style: { color: "red",on: {
              click: () => this.iWillGoWhere("TB"),"我要去淘寶"
        ),}]
   
 iWillGoWhere(type: string) {
    const goWhere: any = {
      TB: () => {
        alert("我要去淘寶！");
      },JD: () => {
        alert("我要去京東！");
      },BD: () => {
        alert("我要去百度！");
      },};
    goWhere[type]();
  }

這樣就可以啦！

到此這篇關於關於怎麼在vue專案裡寫react詳情的文章就介紹到這了,更多相關在vue專案裡寫react內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！