javascript - Vue渲染按钮

Question

我的问题是关于在 vue 实例上渲染一个按钮，单击一个按钮，然后通过事件单击渲染另一个按钮，如果我简单地安装按钮，它不会获得函数 tes。

const Hello = {
  props: ['text'],
  template: '<button v-on:click="tes"> </button> ',
};

new Vue({
  el: '#app',
  data: {
    message: 'Click me'
  },
  methods:{
        alertar: function(event){
                      const HelloCtor = Vue.extend(Hello);
            var instance = new HelloCtor({
                    propsData: {
                  text: 'HI :)'
                }
            })

                instance.$mount() // pass nothing
           this.appendChild(instance.$el)
      },
      tes: function(){
            alert('Teste');
      }
  }
})

错误:

vue.js:597 [Vue warn]: Invalid handler for event "click": got undefined

(found in <Root>)
warn @ vue.js:597
(index):52 Uncaught TypeError: this.appendChild is not a function
    at Vue.alertar ((index):52)
    at invoker (vue.js:2029)
    at HTMLParagraphElement.fn._withTask.fn._withTas

Answer 1

问题是您在父 Vue 内部创建了一个子组件，其中包含绑定(bind)到 tes 函数的模板。这意味着子进程将在自己的方法中查找 tes，但它是父进程的属性，而不是子进程本身的属性，因此它永远无法在自己的作用域中找到它。您必须将该函数添加到子组件中:

const Hello = {
  props: ['text'],
  template: '<button v-on:click="tes"> </button> ',
  methods: {
    tes: function(){
      alert('Teste');
    }
  }
};