使用函数 Vue.js 在模板中添加自定义 HTML 元素答案

【问题标题】：Adding custom HTML element inside template using functions Vue.js使用函数 Vue.js 在模板中添加自定义 HTML 元素
【发布时间】：2023-02-01 19:53:08
【问题描述】：

有什么方法可以使用 javascript 函数在模板标签内呈现带有自定义属性的 html 元素？

例如我试图实现的目标：

<template>
  <div class="test">
    {{ testFunction(param1,param2,param3) }}
  </div>
</template>


<script>
export default {
....
  methods: {
    testFunction(param1,param2,param3) {
      return `<button @click="function()">Click</button>`;
   }
  }
};
</script>

【问题讨论】：

标签： javascript html vue.js dom vuejs3

【解决方案1】：

直接你会得到内插的 html，就像这样

<button @click="function()">Click</button>

即使您使用 v-html directive 修复它以输出 raw HTML 按钮仍然无法使用。

这正确的方法就是像这样使用Render Functions：

const myComponent3 = {   
  setup(props) {
    return () => h('button',  
      {
        onClick(event) {
          alert('Click');
        }
      },
      'Click Me!'
    )
  }
}

这是带有示例的游乐场：

const { createApp, h } = Vue;

const myComponent1 = {   
  template: '#my-component',
  methods: {
    testFunction(par1) {
      return `<button @click="function()">Click</button>`;
    }
  }
}

const myComponent2 = {   
  template: '<div v-html="rawHTML()"></div>',
  methods: {
    myClick() {    
      alert('Click');
    },
    rawHTML(par1) {
      return '<button @click="myClick()">Click</button>';
    }
  }
}

const myComponent3 = {   
  setup(props) {
    return () => h('button',  
      {
        onClick(event) {
          alert('Click');
        }
      },
      'Click Me!'
    )
  }
}

const App = {
  components: { 
    myComponent1,  myComponent2, myComponent3
  }
}

const app = createApp(App)
app.mount('#app')

<div id="app">  
  My Component 1: <my-component1></my-component1><br/>
  My Component 2: <my-component2></my-component2><br/>
  My Component 3: <my-component3></my-component3><br/>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<script type="text/x-template" id="my-component">
  <div class="test">
    {{ testFunction( param1 ) }}
  </div>
</script>

【讨论】：