从现有 HTML 实例化 Vue.js 组件？

Posted 2023-02-23

【中文标题】从现有 HTML 实例化 Vue.js 组件？

【英文标题】：Instantiate Vue.js components from existing HTML?

【发布时间】：2019-01-07 20:47:33

【问题描述】：

我试图让 Vue.js 从现有的 html 模板中实例化它的组件，但我找不到任何合理的信息。我正在使用非 javascript 后端框架，并将 Vue.js 作为普通的 .js 文件添加到视图堆栈中。

假设我的 HTML 结构如下所示：

<div id="vueApp">
  <div class="vueComponent">...</div>
  <div class="vueComponent">...</div>
  <div class="vueComponent">...</div>
</div>

然后我尝试使用这样的 JavaScript 启用它（混合使用 jQuery 和 Vue 以确保安全）：

<script>
  // declare Vue component
  Vue.component('irrelevantName', 
    template: '.vueComponent',
    data: function() 

      return  something: false 
    
  );

  // launch Vue app
  jQuery(document).ready(function() 

    var vueApp = new Vue(
      el: '#vueApp',
      created: function() 

         // TODO: some method that will read/parse the component data, do binding, whatever
      
    );
  );
</script>

每当我在 HTML 结构中有一个精确声明和指向的 <template> 标记并且组件应该只是一个单独的组件时，这种方法非常适用。在这种情况下，虽然我试图实例化由 CSS 类标识的 n 个。 我知道一种可能的方法是将所有组件数据作为隐藏的<input> 与 JSON 化的数组/集合数据一起传递，然后要求vueApp 从这些数据中动态创建单模板驱动的组件，不过这似乎有点乏味。

有什么建议吗？ 提前致谢！

【参考方案1】：

我相信你可能想错了。 Vue 绑定到单个元素，所以如果你想操作多个元素，你可以做的是围绕 div#vueApp 创建一个新的 Vue 实例，并使用 Vue 模板在其中创建组件，如下所示：

Vue.component('vue-comp', 
  data: function () 
    return 
      something: false
    
  ,
  template: '<div class="vue-comp"></div>'
)

let vueApp = new Vue(
  el: '#vueApp',
  created: function() 
    
  
);

div#vueApp 
  padding: 1rem;
  background: #CD545b;
  display: inline-block;


div.vue-comp 
  height: 50px;
  width: 50px;
  margin: 0 1rem;
  background: #236192;
  display: inline-block;

<script src="https://unpkg.com/vue"></script>
<div id="vueApp">
  <vue-comp></vue-comp>
  <vue-comp></vue-comp>
  <vue-comp></vue-comp>  
</div>

【讨论】：

我建议自己做的事情很有趣，但我只是想知道是否可以强制 Vue 使用现有的 HTML 作为其基础的多个组件。

...或者等一下，我漏读了一些东西。你很厉害。谢谢！ :)