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

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

element-ui的对话框中添加页面---Vue页面封装成组件使用及简方法秒会_第1张图片
在Vue中我们要灵活运用组件这个概念,例子如下:

test.vue

<template>
  <div>
   <el-button type="text" @click="dialogVisible = true">点击打开 Dialogel-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>

页面:
element-ui的对话框中添加页面---Vue页面封装成组件使用及简方法秒会_第2张图片
我试过各种方法比如:
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">点击打开 Dialogel-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>

页面:
element-ui的对话框中添加页面---Vue页面封装成组件使用及简方法秒会_第3张图片

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

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

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

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

你可能感兴趣的:(笔记,Vue,Element-ui)