vue怎么使用Vueextend创建全局toast组件

Vue.extend的作用

Vue.extend是Vue中的一个全局API，用于扩展Vue实例，使其可以被多个组件复用。使用Vue.extend可以创建一个全局组件，并在任何Vue实例下使用，同时也可以覆盖组件的默认配置和方法。

Vue.extend({
  /* 组件配置 */
})

如何创建全局toast组件

在Vue中创建全局toast组件可以方便地在任何组件中使用。下面是一个示例：

/* 引入Vue.js */

/* 创建Toast component */
var Toast = Vue.extend({
  template: '
{{ message }}
',

  data: function() {
    return {
      message: '',
    }
  }
})
/* 添加到Vue实例 */
Vue.prototype.$toast = function(message) {
  var toast = new Toast({
    data: { message: message }
  })

  toast.$mount()
  document.body.appendChild(toast.$el)
  /* 定义toast消失时间 */
  setTimeout(function() {
    document.body.removeChild(toast.$el)
  }, 3000)
}

在上面的示例中，通过定义Toast component模板和数据，创建一个Toast组件。然后将其添加到Vue实例中，通过Vue.prototype.$toast扩展可以在任何Vue实例下使用。最后，我们在Toast上定义了消失时间，在3秒后将其从DOM中删除。

如何使用全局toast组件

在任何Vue实例下，我们可以使用Vue.prototype.$toast来自定义Toast消息，下面是一个示例：

new Vue({
  /* 组件配置 */
  methods: {
    showToast: function() {
      this.$toast('Hello world!')
    }
  }
})

在上面的示例中，我们定义了一个名为showToast的方法，并在其中调用了定义的$toast方法，并传入一条消息“Hello world!”。

总结

Vue.extend的作用是扩展Vue实例，使其可以被多个组件复用。使用Vue.extend可以创建一个全局组件，并在任何Vue实例下使用，同时也可以覆盖组件的默认配置和方法。利用Vue.extend可以快速创建一个全局toast组件，并在任何Vue实例下使用。使用时只需在组件中调用Vue.prototype.$toast方法，传入消息即可。