使用 jquery 附加 vue js 组件答案

【问题标题】：append vue js component using jquery使用 jquery 附加 vue js 组件
【发布时间】：2023-03-24 07:28:01
【问题描述】：

我正在尝试使用 jquery 将 vue 组件动态附加到我的应用程序中。但是什么都没有发生，并且附加的元素没有呈现。

<div id="app">


</div>

<script>
  Vue.component('my-component', {
     template: '<p>This is component</p>'
  });

  var Vue = new Vue({
    el: '#app'
  });

 $(document).ready(function(){
   $('#app').append('<my-component></my-component>');
 })
</script>

我想要的结果是，当将<my-component></my-component> 附加到#app 时，它变成了指定的模板。

【问题讨论】：

你为什么要这样做？这不是 vue js 中推荐的方式。
因为页面上的某些项目是通过 ajax 加载的，我只想在需要时加载模板
我是 Vue 的新手。什么是正确的方法？
正确的方法是将 ajax 逻辑处理到 vue 实例中，然后你可以使用 VueJS 显示组件进行操作，当你得到响应时没有 dom 冲突。
@BelminBedak：感谢您的回复。任何示例或教程？

标签： jquery vue.js

【解决方案1】：

你可以试试这个：

var component = {
    template: '<p>This is component</p>'
};

Vue.component('my-component', component);
var myComponent = Vue.extend(component);
var component = new myComponent().$mount();

$('#app').append(component.$el);

如果您需要向组件传递一些道具

var component = new myComponent({
    propsData: {
        values: 'my-value'
    }
}).$mount();

致谢：https://medium.com/@ezkeromar/append-some-vue-js-component-dynamically-to-the-dom-using-jquery-abb92f0425ce

【讨论】：

【解决方案2】：

这对我有用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="app">
        <div id="agregame">

        </div>


        <button type="button" id="agregame_click">Add click</button>
  <button type="button" v-on:click="addForm()">Add Form</button>
</div>

<script>


var vm =new Vue({
    el: '#app',
  data: {
    range:0,
    questions:[]
  },

  methods: {
    addForm: function() {
        vm.questions.push({
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    })

        var Profile = Vue.extend({
  template:`
  <div id="mount-point">
<h3>Guest Content</h3>
  <ul>
    <li v-for="question in questions">
  {{question.firstName}}
    </li>
  </ul>
  </div>
`,
  data: function () {
    return {
         questions: vm.questions

            }
        }
})
// create an instance of Profile and mount it on an element
new Profile().$mount('#mount-point')
    }
  }
})

jQuery(document).ready(function($) {
    $("#agregame_click").on("click", function(){

        $("#agregame").html('<div id="mount-point"></div>');
        vm.$forceUpdate()
         vm.$emit('my-form');
        alert()
    })
});


</script>
</body>
</html>

【讨论】：

【解决方案3】：

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

每个文档：

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

但要更改 currentView，您可能还需要使用 vue，按钮为 @click="currentView('posts')"。

你可以做的其他方式是使用总线来发出值，比如

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

但不确定是不是你想要的

【讨论】：

【解决方案4】：

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

<my-component v-if="value == value_after_ajax"></my-componment>

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

在此处了解更多信息https://vuejs.org/v2/guide/conditional.html#v-if

【讨论】：

谢谢，但这不是我的答案。这个组件如何动态追加？
当我们使用像 vue.js/angular 这样的框架时，我们必须以它们各自的方式来做这些事情。使用 jQuery append，您将动态插入 HTML。类似地，使用 v-if 直到条件为真时 DOM 才会存在。只有当条件为真时，vue.js 才会将 HTML 插入到 DOM 中。 append 部分由 vue 框架自动完成。
除了之前的评论，你试图用 jQuery 实现的目标是不可能的。
好的，我试试这个
如果这有助于您达到预期的结果，请接受答案。