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>

頁面:

換成圖片(看一遍就會):

大佬們如果還有更簡單的方法請一定要留言,我快菜死了.