美文网首页
extend()、 $mount() 、$el用法整理,Toa

extend()、 $mount() 、$el用法整理,Toa

作者: 醉青风 | 来源:发表于2021-08-13 16:18 被阅读0次

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

         // 引入刚才的 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)
    

    this.$el

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

    // ***************************************************************

    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: '修改了点击'
    })
    

    相关文章

      网友评论

          本文标题:extend()、 $mount() 、$el用法整理,Toa

          本文链接:https://www.haomeiwen.com/subject/hntjbltx.html