Question

我的应用程序中有一个场景，我想在javascript中声明一个模板。例如，在我导入模板后

import MyTemplate from "./MyTemplate";
export default {
            components: {MyTemplate},
}

我可以在javascript中声明吗？例如：

mounted:function(){ 
        let temp = new MyTemplate() 
}

而不是html方式

<MyTemplate/>

谢谢

Answer 1

以下是使用render function而不是典型的单页组件的示例：

＆＃13;

Array
(
    [0] => Array
        (
            [OE] => 04715SNAA90ZZ
            [IC] => 536-01037
            [PType] => 536
        )

    [1] => Array
        (
            [OE] => 71570SNAA00
            [IC] => 536-01036
        )

    [2] => Array
        (
            [OE] => 66100SNEA00ZZ
            [IC] => 117-50338
        )

    [3] => Array
        (
            [OE] => 04655SNE305ZZ
        )

)

＆＃13;

var SomeElement = {
  render: function (createElement) {
    return createElement(
      "h1",
      this.name
    )
  },
  props: {
    name: {
      type: String,
      required: true
    }
  }
};

new Vue({
  el: "#app",
  components: { SomeElement: SomeElement },
  template: "#app-template",
  data: function() {
    return {
      num: 0
    }
  },
  methods: {
    increaseNames: function() {
      this.num += 1;
    },
    decreaseNames: function() {
      if (this.num === 0) return;
      this.num -= 1;
    }
  }
});

＆＃13;

如您所见，<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Example</title> </head> <body> <div id="app"></div> <script type="text/x-template" id="app-template"> <div> <some-element v-for="n in num" :name="'Derek-' + n" :key="n" /> <button @click="increaseNames">Add another name</button> <button @click="decreaseNames">Remove another name</button> </div> </script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </body> </html>本质上是一个包含在SomeElement组件中的纯JavaScript对象。

修改

我提供了一种使用内置vue methods attribute动态添加元素到vue模板的方法。请记住，使用像App这样的框架背后的想法是预先定义您的组件，然后尽可能多地或尽可能地使用它们 - 甚至是动态的，如此特定实例中所示。

在javascript

1 个答案: