index.vue 通过js挂载到html

• 先用js，新建一个div，并且赋值一个id

因为，我们组件的挂载，是要指定一个 容器id，这个div就是我们挂载的容器

然后在Elements里面找
找document里面有没有刚刚插入的节点

• 一般是在body的子节点的最后一个
• 因为我们用的是 appendChild 方法
• 这个就是我们刚刚动态插入的

接下来注册组件，然后挂载上去试试

Vue.prototype.$dialog = () => {
  const id = 'custom-dialog'
  const div = document.createElement('div')
  div.id = id
  document.body.appendChild(div)

  // 注册组件
  const DialogComponent = Vue.extend(Dialog)

  // 实例化
  const DialogInstant = new DialogComponent()

  // 挂载
  DialogInstant.$mount(`#${id}`)
}

把组件的内容换成element-ui的弹窗

然后写2个方法去控制visible这个变量
最后，把这个变量给弹窗绑定上去

把 APP.vue 那个调用删了
把这个调用放到一个按钮上面点击
就能实现，点击，打开弹窗了

放到某个点击事件里
你可以放在点击新增按钮的执行方法里面

点击新增按钮
调用这个方法去打开弹窗
写在调用那里

我们会发现：每点一次就会增加一个

所以，当我们操作很多次的时候，就会在document里添加很多个，
节点越多，我们页面的资源就会被占用

所以，我们要在弹窗关闭的时候，把弹窗销毁掉
el-dialog有这个事件
通常来说，我们组件里面调用this.$destroy就能销毁掉自身

接下来，给弹窗传入一个标题

这里调用的时候传入一个对象，里面有个title属性

那么应该去哪里接收这个对象

（方法，传参，接收参数）

就是在注册弹窗那里声明
注册那里就是声明方法
（方法不声明，是无法调用的）
const $dialog 是声明方法