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

Question

有什么方法可以使用 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>

Answer 1

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

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

即使您使用v-html指令将其修复为 output raw HTML按钮仍然无法使用。

正确的方法是像这样使用渲染函数：

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>