extend()、 $mount() 、$el用法整理，Toast的实现原理及实例

extend()、 $mount() 使用说明

1：extend()

extend() 是 Vue.js 中用于创建 Vue 组件或实例的一个方法。通常，我们会使用 Vue.extend 来创建一个 Vue 组件。

2：$mount()

$mount() 是 Vue 实例的一个方法，用于将 Vue 实例绑定到指定的 DOM 元素上。

     // 引入刚才的 main 组件  
    import Main from "./main.vue"; 
    //把组件实例化单独出来，这里的 Profile 其实就是一个单独出来的实例化组件对象
    let Profile = Vue.extend(Main);
    //新new一个组件出来  这里的ProfileMain就是组件了
    let ProfileMain =  new Profile() 

  // 创建实例的时候可以在里面修改数据方法等  ，
  //这里在组件里面就可以拿到对应的数据，有会替换，没有会增加
  // 如
  let ProfileMain = new Profile({
       data() {
          return {
              name:'999999999999999'
          }
       },
   })

   //新 new 出来的组件只能配合 $mount() 方法
  // vm.$mount手动挂载一个未挂载的实例

   mount有两种挂载方式
  //   1.替换   创建并挂载到 #app (会替换 #app)  
         ProfileMain.$mount('#app')
  //   2.挂载到别的地方   不会替换   
             component =  ProfileMain.$mount()  //实例出来
            //       取到ID是app的元素 并添加到他的子集             
            document.getElementById('app').appendChild(component.$el)
              //       直接加到  body 下面           
           document.body.appendChild(component.$el)

3：$el

$el 是 Vue 实例中的一个属性，表示该实例当前所绑定的根 DOM 元素。

类型：string | Element
 ******************   限制：只在用 new 创建实例时生效  ******************。
  详细：
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 
选择器，也可以是一个 HTMLElement 实例。
 在实例挂载之后，元素可以用 vm.$el 访问。

4：Toast

Toast 通常不是一个 Vue.js 内置方法，而是第三方库（如 Vue-Toast、vuetify 的 Toast 组件等）提供的功能，用于快速显示一个提示信息。使用这些库，你可以很容易地在页面上弹出一个通知或提示框。
创建一个组件如下：

<template>
  <p class="toast">{{ name }}</p>
</template>
<script>
export default {
  name: "Toast",
  data() {
    return {
      name: "点击了",
      duration: 3000
    };
  },
  mounted() {
    setTimeout(() => {
      // duration 后通过父级移除子元素的方式来移除该组件
      this.$el.parentNode.removeChild(this.$el);
    }, this.duration);
  },
};
</script>
<style lang="scss" scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  color: #fff;
  z-index: 9999;
  transform: translate3d(-50%, -50%, 0);
  background-color: rgba(0, 0, 0, 0.6);
  padding: 5px;
  border-radius: 5px;
}
</style>

建一个js文件

// main.js
import Vue from "vue"; // 引入 Vue 是因为要用到 Vue.extend() 这个方法
import Main from "./main.vue"; // 引入刚才的 toast 组件

// 实例
let Profile = Vue.extend(Main);
let time = true

const Toast = function (options = { name: '点击了', duration: 3000 }) { // 就改了这里，加了个 options 参数
    if (time) {  // 采用了节流方法防止再次点击
        time = false
        let ProfileMain = new Profile({
            data: options,
        })
        document.body.appendChild(ProfileMain.$mount().$el)
        setTimeout(function () {
            time = true
        }, options.duration)
    }
};

export default Toast;

在main.js里面注册挂载该方法

import toast from '上面js地址'
Vue.prototype.$toast = toast

使用

 this.$toast({ 
       name: '修改了点击'
})