如何在 vueJs 3 中渲染 vue 模板之前隐藏开槽元素？答案

【问题标题】：How to hide slotted element before rendering the vue template in vueJs 3?如何在 vueJs 3 中渲染 vue 模板之前隐藏开槽元素？
【发布时间】：2022-11-03 02:21:44
【问题描述】：

看到这些图片我不想在这里显示那些元素

请参阅下面的代码示例样本.blade.php

<create-form id= "create_form" title="Sample Form" >
    <div class="col-md-6">
      <label class="form-label" for="multicol-username">Username</label>
      <input type="text" id="multicol-username" class="form-control" placeholder="john.doe" name="ma_user_id" data-type="varchar" required>
    </div>
    <div class="col-md-6">
      <label class="form-label" for="multicol-email">Email</label>
      <div class="input-group input-group-merge">
        <input type="text" id="multicol-email" class="form-control" placeholder="john.doe" aria-label="john.doe" aria-describedby="multicol-email2" name="password" data-editmode="false" data-editname="email">
        <span class="input-group-text" id="multicol-email2">@example.com</span>
      </div>
    </div>
</create-form>

createForm.vue

<template>
  <div class="card mb-4" v-show="showForm">
    <h5 class="card-header">{{title}}</h5>
    <form class="card-body" id="createForm" enctype="multipart/form-data" ref="createForm">
      <div class="row g-3">
        <slot></slot>
        <div class="pt-4">
          <button type="submit" class="btn btn-primary me-sm-3 me-1" id="save_return">Submit</button>
          <button type="reset" class="btn btn-label-secondary" @click="hideForm">Cancel</button>
        </div>
      </div>
    </form>
  </div>
</template>
<script>

export default {
  props: ['title'],
  setup() {},
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {

  },
  methods: {
  },
}
</script>

应用程序.js

require('./bootstrap')


import { createApp } from 'vue'
import createForm from './components/createForm';

const app = createApp({})

app.component('create-form', createForm);

app.mount('#app')

【问题讨论】：

您可以添加一个isMounted，只有在安装后才会成为true，然后将<slot/> 放入<template v-if="isMounted">

标签： javascript vue.js vuejs3

【解决方案1】：

听起来您希望 php 后端呈现的模板在 vue 能够处理它之前不可见，尽管我不是 100% 确定是这种情况。

如果是这种情况，您可以使用v-cloak directive

此指令仅在无构建步骤设置中需要。

使用 DOM 内模板时，可能会出现“未编译模板的闪光”：用户可能会看到原始的小胡子标签，直到安装的组件用渲染的内容替换它们。

v-cloak 将保留在元素上，直到关联的组件实例被挂载。结合[v-cloak] { display: none }等CSS规则，可以用来隐藏原始模板，直到组件准备好。
<create-form id="create_form" title="Sample Form" v-cloak>
...

<style>
  [v-cloak] { display: none }
</style>

【讨论】：