vue.js - 触发组件自定义事件

问题描述

问 题

Vue.component("example",{

template:"<span>{{message}}</span>",

data:function(){

  return {
    message:"no update"
}

},
methods: {

updateMessage: function () {
  this.message = 'updated'
  console.log(this.$el.textContent) // => 'not updated'
  this.$nextTick(function () {
    console.log(this.$el.textContent) // => 'updated'
  })
  
}

}
})

各位大神，我怎么触发updateMessage？？

解决方案

增加一个mounted生命周期钩子，这样可以保证vue实例已经挂载，在此基础上触发updateMessage

组件外触发的话可以给你写的<example></example>加一个引用

<example ref="test"></example>

在vue根实例中调用

vm = new Vue({
        el: '#app',
        mounted() {
           this.$refs.test.updateMessage();
        }
    });

组件内部调用的话

Vue.component("example",{
  template:"<span>{{message}}</span>",
  data:function(){
    return {
      message:"no update"
    }
  }, 
  methods: {
    updateMessage: function () {
      this.message = 'updated';
      console.log(this.$el.textContent); // => 'not updated'
      this.$nextTick(function () {
      console.log(this.$el.textContent) // => 'updated'
      });
   }
  }，
  mounted() {
    this.updateMessage();
  }
})

这篇关于vue.js - 触发组件自定义事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！