vue自定义组件 (两种之二)弹窗为例

方式: 利用js代码,在必要时候动态弹出组件, 而不需要Vue.use,也必在页面上写组件.

依据: 

vm.$mount( [elementOrSelector] )

• 参数：

  • {Element | string} [elementOrSelector]
  • {boolean} [hydrating]

• 返回值：vm - 实例自身

• 用法：

  如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。

  如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。

vm.$el

• 类型：Element

• 只读

• 详细：

  Vue 实例使用的根 DOM 元素。

Vue.extend( options )

• 参数：

  • {Object} options

• 用法：

  使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

方法:

    (一)用Vue.extend(vueComponent对象), 返回一个以参数对象为模板的vue组件实例的 构造函数.

            这个构造函数参数是{date,methods}这种形式,会覆盖在VueComponent里的相同数据值,

     (二)定义一个函数, 函数执行做三件事:

         1用这个构造函数创建vue的一个vue组件实例,

         2 挂载它,挂载方法直接是 vm.$mount();参加$mount的Api

         3 用原生方法将这个实例插到body里.

     (三)将这个构造函数挂载在Vue.prototype上. 注意,让这个组件消失的方法是$el.remove();

代码:  在components文件夹下新建一个文件夹,里面有alert.vue和index.js两个文件

     alert.vue模板的代码:

  1 
 18 
 45 
 46 

index.js的代码

 1 import Vue from 'vue';
 2 import alert from './alert.vue';
 3 let MyAlertConstructor = Vue.extend(alert);//创建vm实例的构造函数
 4 let instance;
 5 const MyAlert = (option) => { //写一个重要的方法,里面有三个内容
 6   // 创建实例并且过滤参数
 7   
 8   instance = new MyAlertConstructor({ //1生成实例
 9     data: option 
10   })
11                                       // 2 挂载实例
12   instance.$mount();
13   document.body.appendChild(instance.$el);//3原生方法插入body
14   return instance;
15 }
16 export default MyAlert;

主文件main.js里, 挂载方法

 1 import MyAlert from './components/Toast1';//自定义弹框 2 Vue.prototype.$alert = MyAlert; 

使用方法:

在组件的js文件里, 当需要弹出时候, 用this.$alert({data:{

 1   message: "你今天开心吗?",
 2         btns: [
 3           {
 4             text: "开心",
 5             click: () => {
 6               // 测试是否可以拿到这边的this
 7               console.log(this.msg);
 8             }
 9           },
10           {
11             text: "不开心",
12             click: () => {
13               // 这里的event target 可能没用 因为已经移除DOM了
14               // 返回btn原来本身
15               console.log("不开心");
16             }
17           },
18           {
19             text: "无回调"
20             // 测试一下没有回调函数的时候
21           },
22           {
23             text: "帮助",
24             click: this.isOK
25           }
26         ]

 

}})