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');
      }
  }
})

Erro：

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内创建了一个子组件，其中包含与tes函数绑定的模板。这意味着孩子将查找自己的tes方法，但它是父母的属性，而不是孩子本身的属性，所以它永远无法在自己的范围内找到它。您必须将该功能添加到子组件：

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

Answer 2

只是扩大@Philip的答案基本上，您无法在以编程方式创建的组件中访问父方法。您需要在子组件中指定方法。

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

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

                }
            })

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

在这里查看这个小提琴 https://jsfiddle.net/50wL7mdz/370645/

但是在某些情况下，您可以使用访问父组件方法我认为$parent指令在以编程方式创建组件时不起作用。

Vue渲染按钮

2 个答案: