Question

我正在尝试为以下场景找到可行的解决方案：

vuejs将呈现其主要＆＃34;内容第一;
当发生一些点击时，它会加载一些vuejs识别html（包括组件引用及其数据）;
应该编译动态加载的vuejs部分html并将其插入到预定义的节点（挂载点）。

我现在正尝试使用$ mount功能试一试。你可以查看这个小提琴http://jsfiddle.net/matiascx/cd35khy8/ 另外，我在这里粘贴代码：

<div id="app">
  <button v-on="click: addNewElement()">Add custom Element</button> 
  <br />
  <div id="dynamicloaded"></div>
</div>

new Vue({
  el: '#app',
  data: {
    sampleElement: '<div><button v-on="click: test()">Test</button></div>'
  },
  methods:{
    addNewElement: function(){
      var vmtemp = Vue.extend({
                        template: this.sampleElement,
                        methods: {}
                   });
      new vmtemp().$mount(document.getElementById('dynamicloaded'));
    },
    test: function(){
       alert('Test');
    }
  }
});

vuejs总是抱怨：

VM1881:3 Uncaught TypeError: scope.test is not a function

我想知道这是因为错误的范围分配给新安装的内容。

如何解决？感谢@gurghet，他指出这个问题是由新安装的组件引起的。无法访问根范围内的测试功能。
这是实现该目标的建议方法（使用正确的范围动态编译和挂载计数）感谢@gurghet，我提出了更多关于这张票的实际问题：
如何让父动态定义的测试函数可用于动态安装的组件？ 4.为什么动态安装的组件与root vue实例没有子父关系？如何让他们拥有亲子关系？谢谢〜！

Answer 1

如果您调试应用程序，您会发现选项中不存在方法test。这是因为父亲的方法是

。

您应该直接在methods:{}

的dynamicloaded中添加方法测试

http://jsfiddle.net/L25oqe5n/

动态附加vuejs内容：scope.test不是函数

1 个答案: