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

前几天整了很久的element-ui+vue一直想实现一个效果:
如何在element-ui的对话框中添加vue页面.
最后实在弄不出来了(因为前端太菜了),就找了一个朋友帮忙,通过讨论终于还是解决了:

在Vue中我们要灵活运用组件这个概念,例子如下:

test.vue

<template>
  <div>
   <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
    <!-- 这是一个基础的对话框样式 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%">

      <!-- 在这个空白处希望放上一个vue页面 -->

      <router-link to=""></router-link>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
      return {
        dialogVisible: false
      }
  },

}
</script>

页面:

我试过各种方法比如:
router-view 放置去显示子组件
或者直接拉一个router-link 连接放入vue页面的地址
都不可以…鬼知道我还怎么写了


这个时候我们可以通过组件引入的方式将页面封装成组件然后再放入对话框

首先将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>

页面:

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

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