带有innerhtml的Vuejs答案

【问题标题】：Vuejs with innerhtml带有innerhtml的Vuejs
【发布时间】：2022-01-13 07:06:51
【问题描述】：

有一个过滤页面。

|过滤器 | |内容 |

过滤器在视图中，最初显示的内容是 Ruby。如果选择了过滤器，则应删除（隐藏）Ruby 模板，并滚动来自 api 的内容（通过 axios 获取）。

试过这样：

 document.querySelector('.shop-content__grid').innerHTML = `
  <div @click='this.testBtn'>Test</div>
 `;

是的，它会删除内部内容，但不会作为视图读取。有合法的方法可以做到这一点吗？或者有没有其他方法可以解决这个问题？

【问题讨论】：

你可能需要花一些时间阅读 VueJS 2。如果整个东西是一个 Vue 应用程序，你永远不会使用文档选择器。如果您仅将 Vue 用于常规 HTML 页面中的一个或两个组件，那么您可能必须将 Vue 组件“渲染”到相应的 Div 中。
@Teddy then you may have to "render" the Vue component into the respective Div. 是什么意思？是的，我在 HTML 中将 vue 用于 1-2 组件。

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

如果它是一个成熟的 Vue 应用程序，那么你的想法是错误的。您甚至很少在 Vue 应用程序中使用文档选择器。

如果它只是一个使用一两个简单 Vue 组件的 HTML 页面，那么您可能必须提供元素选择器并提供数据来定义 Vue 组件并将其渲染到现有的 HTML 元素中。

例如：

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <h1>{{mydetails()}}</h1>
      </div>
      <script type = "text/javascript" src = "js/vue_instance.js"></script>
   </body>
</html>

vue_instance.js

var  vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      address    : "Mumbai"
   },
   methods: {
      mydetails : function() {
         return "I am "+this.firstname +" "+ this.lastname;
      }
   }
})

参考： https://vuejs.org/v2/guide/#What-is-Vue-js

还有这个教程： https://www.tutorialspoint.com/vuejs/vuejs_instances.htm

在上面的示例中，您在组件定义本身中提供目标元素、数据和方法。

如果数据发生变化，您可能需要重新创建组件。

与此不同的是，如果组件侦听事件总线，则无需再次渲染组件 - 您可以将数据从外部传递（或发出）到组件，然后它会重新渲染自己。

这是一个简单的事件总线示例： https://andrejsabrickis.medium.com/https-medium-com-andrejsabrickis-create-simple-eventbus-to-communicate-between-vue-js-components-cdc11cd59860

【讨论】：