vuetify写一个导入显示页面，点击×关闭页面的小案例?

效果图：

效果图二:

代码如下:
app.vue

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>
      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <!-- <HelloWorld/> -->
      <!-- <views></views> -->
      <myHelloWorld></myHelloWorld>
    </v-main>

  </v-app>
</template>

<script>
// import HelloWorld from './components/HelloWorld';
import myHelloWorld from './view/myHelloWorld.vue'
export default {
  name: 'App',
    //  data: () => ({ value: 'recent' }),
  components: {
    // HelloWorld,
    // Views
    myHelloWorld

  },

  data: () => ({
     value: 1
  }),
};
</script>

myHelloWorld.vue

<template>
  <div style="text-align:center;color:blue;font-size:24px;">
    <button @click="submit()">导入显示内容</button>
     <Child ref="importchild"></Child>
  </div>

</template>

<script>

export default {
name:'myHelloWorld',
  components: {
    Child: () => import('@/components/Child')
  },
  data(){
    return{

    }
  },
  methods:{
   //导入显示内容  默认是隐藏
   submit(){
     //点击去触发子组件的所有方法
    this.$refs.importchild.switchDialog(true);
   }
  }
}
</script>

<style>

</style>

Child.vue

<template>
<v-dialog  v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition" style="z-index: 999;">
   <v-card style="width: 100vw;overflow-x: hidden;">
      <v-toolbar dark color="primary" style="position: fixed;width: 100vw;z-index: 10;">
        <v-toolbar-title>导入结果</v-toolbar-title>
          <v-spacer></v-spacer>
         <v-toolbar-items>
          <v-btn icon dark @click="dialog = false"><v-icon>mdi-close</v-icon></v-btn>
         </v-toolbar-items>
      </v-toolbar>
      <div style="margin-top: 80px;" class="px-6">
        这是显示的内容这是显示的内容
      </div>
   </v-card>
</v-dialog>
</template>

<script>
export default {
  name:'Child',
  data(){
    return {
      dialog:false,//默认隐藏
    };
  },
   methods: {
    switchDialog(show){
      console.log(show,'数据是');
      this.dialog = show;
    }
   },

}
</script>

<style scoped="scoped"  lang="scss">

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import i18n from './i18n/i18n'
//引入



//中英文翻译 i18n
//可以用一个对象储存 
Vue.config.productionTip = false





new Vue({
  vuetify,
  i18n,
  render: h => h(App)
}).$mount('#app')

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from '@/i18n/messages/en'
import en from 'vuetify/lib/locale/en'

Vue.use(VueI18n)

export default new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: {
      ...messages,
      $vuetify: en,
    },
  },
})

messages下en.json

{
  "avatar": "John Leider",
  "buttons": "Buttons",
  "calendar": "Calendar",
  "charts": "Charts",
  "components": "Components",
  "ct": "CT",
  "dashboard": "Dashboard",
  "dtables": "Data Tables",
  "eforms": "Extended Forms",
  "error": "Error Page",
  "etables": "Extended Tables",
  "example": "Example",
  "forms": "Forms",
  "fullscreen": "Full Screen Map",
  "google": "Google Maps",
  "grid": "Grid System",
  "icons": "Icons",
  "lock": "Lock Screen Page",
  "login": "Login Page",
  "maps": "Maps",
  "multi": "Multi Level Collapse",
  "notifications": "Notifications",
  "pages": "Pages",
  "plan": "Choose Plan",
  "pricing": "Pricing",
  "my-profile": "My Profile",
  "edit-profile": "Edit Profile",
  "register": "Register Page",
  "rforms": "Regular Forms",
  "rtables": "Regular Tables",
  "rtl": "RTL Support",
  "search": "Search...",
  "settings": "Settings",
  "tables": "Tables",
  "tabs": "Tabs",
  "tim": "Creative Tim",
  "timeline": "Timeline",
  "typography": "Typography",
  "user": "User Profile",
  "vforms": "Validation Forms",
  "widgets": "Widgets",
  "wizard": "Wizard",
  "vuetify": "Vuetify {suffix}"
}

package.json

{
  "name": "vuetify-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-i18n": "^8.27.0",
    "vuetify": "^2.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "~1.32.0",
    "sass-loader": "^10.2.1",
    "vue-cli-plugin-vuetify": "~2.4.5",
    "vue-template-compiler": "^2.6.11",
    "vuetify-loader": "^1.7.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

总结:
ref 有三种用法：
1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点