element-ui的对话框中添加页面---Vue页面封装成组件使用及简方法秒会

深藏阁楼爱情的钟 2023-07-03 08:29 107阅读 0赞

**前几天整了很久的element-ui+vue一直想实现一个效果:  
如何在element-ui的对话框中添加vue页面.  
最后实在弄不出来了(因为前端太菜了),就找了一个朋友帮忙,通过讨论终于还是解决了:**  
![在这里插入图片描述][20200205140401447.png]  
**在Vue中我们要灵活运用组件这个概念,例子如下:**

**test.vue**

<template>
      <div>
       <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
        
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
    
          
    
          <router-link to=""></router-link>
        </el-dialog>
      </div>
    </template>
    
    <script> export default { data() { return { dialogVisible: false } }, } </script>

**页面:**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70]  
**我试过各种方法比如:  
router-view 放置去显示子组件  
或者直接拉一个router-link 连接放入vue页面的地址  
都不可以…鬼知道我还怎么写了**  
  
![在这里插入图片描述][20200205141044956.png]  
**这个时候我们可以通过组件引入的方式将页面封装成组件然后再放入对话框**

**首先将vue页面封装成组件**

**测试页面testx.vue:**

<template>
      <div>
          我就要出现在其他页面了!!!
      </div>
    </template>
    
    <script> export default { // 给组件起一个名字 name : 'testx' } </script>
    
    <style> </style>

**test.vue修改:**

<template>
      <div>
       <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
        
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
    
          
          <testx></testx>
    
          <router-link to=""></router-link>
        </el-dialog>
      </div>
    </template>
    
    <script> //引入组件,testx的名字是自己起的 import testx from './testx' export default { //配置组件(必须经过这一步才可以使用组件) components :{ testx }, data() { return { dialogVisible: false } }, } </script>

**页面:**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 1]

# 换成图片(看一遍就会): #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 2]

# 大佬们如果还有更简单的方法请一定要留言,我快菜死了. #

![在这里插入图片描述][20200205143104286.png]

[20200205140401447.png]: https://img-blog.csdnimg.cn/20200205140401447.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200205140533552.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s=,size_16,color_FFFFFF,t_70
[20200205141044956.png]: https://img-blog.csdnimg.cn/20200205141044956.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200205142446807.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200205142837990.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J5YW5fYmxhY2s=,size_16,color_FFFFFF,t_70
[20200205143104286.png]: https://img-blog.csdnimg.cn/20200205143104286.png