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

Question

我正在尝试为以下情况寻找可行的解决方案：

1. vuejs 将首先呈现其“主要”内容；
2. 当某些点击发生时，它会加载一些 vuejs 感知的 html（包括组件引用及其数据）；
3. 应编译动态加载的 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

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

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

Answer 1

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

你应该直接在dynamicloaded的methods:{}中添加方法test

http://jsfiddle.net/L25oqe5n/