使用jquery附加vue js组件

我正在尝试使用jquery动态地将vue组件附加到我的应用程序。 但没有任何反应，附加元素无法渲染。

 
 
  Vue.component('my-component', { template: '
This is component
' }); var Vue = new Vue({ el: '#app' }); $(document).ready(function(){ $('#app').append(''); })  

我想要的结果是，当将附加到#app ，那就变成了指定的模板。

Answer 1

处理此问题的正确方法是通过条件渲染：

您可以将正确的条件放在v-if中 ，只有在ajax调用后需要时才显示模板。

点击此处了解更多相关信息，请访问https://vuejs.org/v2/guide/conditional.html#v-if

Answer 2

您可以为https://vuejs.org/v2/guide/components.html#Dynamic-Components使用动态组件

每个文件：

 var vm = new Vue({ el: '#example', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } } }) 

但是对于更改currentView，您可能还需要使用vue，使用button @ click =“currentView（’posts’）”。

其他方法你可以使用总线来发出值，比如

 var bus = new Vue(); $(document).ready(function(){ bus.$emit('my-component'); }) 

但不确定你是否想要它