精华内容
下载资源
问答
  • vue组件嵌套组件不显示_动态显示Vue组件
    千次阅读
    2020-08-30 14:40:52

    vue组件嵌套组件不显示

    使用条件指令 (Using conditional directives)

    The simplest option is to use the v-if and v-else directives.

    最简单的选择是使用v-ifv-else指令。

    Here’s an example. The v-if directive checks the noTodos computed property, which returns false if the state property todos contains at least one item:

    这是一个例子。 v-if指令检查noTodos计算属性,如果state属性todos包含至少一项,则返回false:

    <template>
      <main>
        <AddFirstTodo v-if="noTodos" />
        <div v-else>
          <AddTodo />
          <Todos :todos=todos />
        </div>
      </main>
    </template>
    
    <script>
    export default {
      data() {
        return {
          todos: [],
        }
      },
      computed: {
        noTodos() {
          return this.todos.length === 0
        }
      }
    }
    </script>

    This allows to solve the needs of many applications without reaching for more complex setups. Conditionals can be nested, too, like this:

    这样可以解决许多应用程序的需求,而无需进行更复杂的设置。 条件语句也可以嵌套,如下所示:

    <template>
      <main>
        <Component1 v-if="shouldShowComponent1" />
        <div v-else>
          <Component2 v-if="shouldShowComponent2" />
          <div v-else>
            <Component3 />
          </div>
        </div>
      </main>
    </template>

    使用component Component and is (Using the component Component and is)

    Instead of creating v-if and v-else structures, you can build your template so that there’s a placeholder that will be dynamically assigned a component.

    您可以构建模板,而不是创建v-ifv-else结构,以便有一个占位符将动态分配给组件。

    That’s what the component component does, with the help of the v-bind:is directive.

    这就是component组件在v-bind:is指令的帮助下所做的事情。

    <component v-bind:is="componentName"></component>

    componentName is a property of the state that identifies the name of the component that we want to render. It can be part of the state, or a computed property:

    componentName是状态的属性,用于标识我们要呈现的组件的名称。 它可以是状态的一部分,也可以是计算属性:

    <script>
    export default {
      data() {
        return {
          componentName: 'aComponent',
        }
      }
    }
    </script>

    翻译自: https://flaviocopes.com/vue-dynamically-show-components/

    vue组件嵌套组件不显示

    更多相关内容
  • vue3组件跳转之后不显示

    千次阅读 2022-04-02 17:28:16
    vue3组件跳转之后不显示 可能的原因有很多,大部分是路由和组件引入的问题,除此之外还要注意内置组件transition的使用带来的问题。 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件,这个组件必须仅有...

    vue3中组件跳转之后不显示

    可能的原因有很多,大部分是路由和组件引入的问题,除此之外还要注意内置组件transition的使用带来的问题。

    仅支持单个元素或组件作为其插槽内容。如果内容是一个组件,这个组件必须仅有一个根元素。

    这一点在官方文档可以看到。
    在这里插入图片描述
    vue3使用一个虚拟节点作为组件的根节点,所以允许我们在书写代码的过程中在template中使用多个节点,但是会与内置组件transition发生冲突,需要注意。

    展开全文
  • vue动态添加组件

    千次阅读 2021-09-28 22:50:46
    可能在这个列表页把所有的组件都import进来,所以在弹窗显示的时候scope.row获取当前记录的信息,然后根据信息中的对应关键字段(如下面我代码中的programe_id)就是组件唯一的文件名,拼接一下就能动态添加组件...

    使用场景

    有一个列表页如下,当我点击查看的时候,
    在这里插入图片描述
    会弹窗,弹窗的主要内容是组件,
    在这里插入图片描述

    每个组件的内容都不一样,我不可能在这个列表页把所有的组件都import进来,所以在弹窗显示的时候scope.row获取当前记录的信息,然后根据信息中的对应关键字段(如下面我代码中的programe_id)就是组件唯一的文件名,拼接一下就能动态添加组件

    例如需要添加的组件如下:
    在这里插入图片描述

    核心代码

    methods:{
      add(msg){
        let programe_id = msg.programe_id
        this.$options.components['appTable'] = require('@/components/apps/app' + programe_id+"temp.vue").default
      }
    },
    render: function (createElement) {
        return createElement('appTable')
    }
    
    
    展开全文
  • 由于 pcHome 和 mvHome 里面都用到了 swiper 插件,所以用 v-if 老是...访问之后就出问题了,组件内的东西都显示不出来,用 vConsole 调试工具查看 html 结构,结构都有,就是不展示,这可急死我了,以前也没碰到这...

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    由于 pcHome 和 mvHome 里面都用到了 swiper 插件,所以用 v-if 老是出来一堆堆的红色错误,虽然程序照常运行,但是那一堆报错我就受不了,后来切换了 v-show 本地运行是好的,换安卓手机访问也是好的,用了一个 苹果手机 访问之后就出问题了,组件内的东西都显示不出来,用 vConsole 调试工具查看 html 结构,结构都有,就是不展示,这可急死我了,以前也没碰到这么个诡异的事情呐(估计跟这两个组件太大有关系吧,不确定)
    以前用 v-show 来回切换局部页面用着很舒服哒,头一次将 v-show 作用到自定义组件上,心里也直打鼓,终于…在 vue 的官网上看到了方法:【动态组件
    在这里插入图片描述
    还有一个完整的 demo 供参考,真好~【看demo
    在这里插入图片描述
    哎嘿?动态组件还真的是…不是我那么搞的哈,去改改代码试试???
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    然后去苹果手机上预览一下,啊哈 真的好了 perfect
    将这个例子记录一下:

    <div class="index-home">
    	<component :is="currentComponent"></component><!-- 修改之后是这么用的 -->
    	<!-- <pc-home v-show="!miniScreen"></pc-home>
    	<mv-home v-show="miniScreen"></mv-home> -->
    </div>
    
    import pcHome from './pc/home';
    import mvHome from './mv/home';
    export default {
    	components:{
    		pcHome,
    		mvHome
    	},
    	data() {
    		return {
    			miniScreen:false, //以前的废物
    			nowComp:'pc' //修改之后的
    		};
    	},
    	computed:{
    		currentComponent:function(){
    			return this.nowComp + '-home'
    		}
    	},
    	mounted() {
    		this.init();
    	},
    	methods: {
    		init() {
    			let clientInfo = clientXY();
    			this.screenW = clientInfo.width;
    			this.screenH = clientInfo.height;
    			if (this.screenW >= 751) {
    				//this.miniScreen = false;
    				this.nowComp = 'pc'
    			} else {
    				//this.miniScreen = true;
    				this.nowComp = 'mv'
    			}
    		}
    	}
    };
    
    展开全文
  • vue3 is动态组件

    千次阅读 2021-04-20 16:45:57
    就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示动态切换:(:is后面的是对应的组件名,必须一致) 在挂载点使用component标签,然后使用v-bind:is=”组件名”,会自动去找...
  • Vue动态引入组件

    千次阅读 2021-08-11 19:27:19
    当我们的页面需要定量的组件进行渲染时,我们可能会大量引入全部组件再使用动态组件完成需求,通过组件动态引入减少代码量以及项目难度,我们需要掌握以下内容 动态组件 通过<component>标签上的is属性实现对...
  • Vue实现动态组件的切换

    千次阅读 2021-11-09 21:46:18
    在这里跟大家分享一下如何实现动态组件的切换,举个例子,就比如组件库中的Steps步骤条,我们可能会去实现一个步骤显示一个页面这样的一个功能。 首先我们要了解component组件,他是vue内置的一个组件,提供了一...
  • Vue自定义组件不显示

    千次阅读 2020-01-11 10:42:41
    Vue官网教程找copy的例子,但发现浏览器中却不显示,代码如下: <html> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <a-test post-title="hello!"></a-...
  • Vue组件不显示问题

    千次阅读 2021-03-17 21:41:42
    Vue组件显示问题 刚开始按照vue.js的文档学习,自动写代码时发现了完全按照官网的例子写的代码,但是浏览器就是显示不出来,找了半天才发现是因为没有创建Vue的实例,废话不多说直接上代码。 <body> <...
  • vue动态组件使用及传值

    万次阅读 2020-10-16 10:22:23
    在项目中常常需要切换不同的组件,这时候我们就可以使用vue内置的动态组件的方式来实现。 component 组件:在页面中通过使用component元素,在根据组件中的is属性来动态的切换不同的组件。 demo: <template> /...
  • Vue3使用element-plus 组件不显示

    千次阅读 2022-04-21 17:08:36
    vue3引入element-plus之后会出现一些黄色警告 引用的element的组件不显示 例如我这个问题 是使用 element-plus 中表格组件出现的警告 导致数据不显示 经过排查 是引入element组件文件 里没有注册这个组件 只需要...
  • Vue 动态显示组件 component :is

    千次阅读 2020-05-16 10:33:50
    点击不同的组件名称,界面显示相应的组件。 实现过程 1、导入所需的组件 1、点击左侧按钮时,将对应组件的名字保存进数组中 <ul class="components-list"> // 点击时,将对应组件名保存进数组 <...
  • vue-动态组件(:is=“组件名“)

    千次阅读 2020-11-27 17:37:29
    根据v-bind:is="组件名" 中的组件名去自动匹配组件 也是是一个组件对象,如果匹配到则不显示。 改变挂载的组件,只需要修改is指令的值即可。 father.vue <template> <div> <h2>动态组件&...
  • Vue-动态组件和插槽

    千次阅读 2021-11-25 15:14:25
    动态组件指的是动态切换组件显示与隐藏。 如何实现动态组件渲染 vue 提供了一个内置的 组件,专门用来实现动态组件的渲染。 使用方法: 当我们使用默认这种写法时,我们会发现,如果在right进行了操作,再切换到...
  • vue 动态组件

    千次阅读 多人点赞 2019-01-11 16:41:10
    动态组件就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。 在挂载点使用 component 标签,然后使用 is =“组件名”,它会自动去找匹配的组件名,如果有,则显示; 看例子: ...
  • Vue3项目中动态组件component的使用

    千次阅读 2021-09-22 14:50:53
    商品详情 商品评价(500+) 效果:点击哪个组件,currentName= 组件的名称就显示哪个组件
  • 最近做的一个功能要根据后台配置显示相应的功能模块,这里就要用到动态加载组件,但是又知道在script setup 里面怎么去写,搜了搜都是一样的帖子,没有告诉我怎么去写,然后自己摸索了一番,各种试验,最后还真...
  • Vue组件显示与隐藏

    千次阅读 2020-07-30 00:18:15
    Vue组件显示与隐藏 第一步 使用v-show 1.1 父组件 1.2 子组件 2 第二步 父子组件传参 2.1 父组件 2.2 子组件 Vue组件显示与隐藏 在使用Vue开发前端页面的过程中,经常都会遇到...
  • 一开始父组件显示,子组件隐藏。 点击父组件按钮,父组件隐藏自身,子组件显示。 点击子组件按钮,子组件隐藏,父组件显示 解决办法: 父组件引入子组件,并注册,绑定相关变量和值。 父组件下的代码 show...
  • 如图:两个组件在页面上不显示 原因: < template> (将要渲染的HTML)必须是包含在一个标签里面的。 解决: 最外层加个div包起来就行 代码示例: 在App.vue中引入一个组件 App.vue <template> <...
  • 分析:动态路由写的没问题,大概是问题出在路由寻址时找到具体的组件 解决:根据分析定位问题可能出在路由表上,仔细检查一下路由表,发现动态路由的参数没加,解决如下图: 加上尾巴上的参数:id,成功跳转显示...
  • Vue中什么是动态组件

    千次阅读 2019-09-30 10:46:23
    动态组件就是将几个组件放在一个挂载点下,这个挂载点就是标签,其需要绑定is属性,属性值为父组件中的变量,变量对应的值为要挂载的组件组件名,然后根据父组件里某个变量来动态显示哪个,也可以都不显示,如: ...
  • vue动态修改组件样式

    千次阅读 2020-07-07 18:18:24
    一般我们vue动态修改一个组件的样式会用 :class :style等方法。 今天我在修改一个组件样式的时候发现覆盖了原有样式 于是我在style标签中用/deep/修改了一下,发现成功了,但是我必须要动态修改,那么怎么在css...
  • Vue动态添加组件的两种实现

    千次阅读 2020-12-26 18:41:52
    Vue项目中,想要动态为页面上添加组件,是一件十分容易就能够实现的事情,这必须要得益于Vue框架的强力支持! 但有时候往往就是由于事情变得简单起来后,却突然忘记了要如何去实现。这大概就是对代码走火入魔的一种...
  • vue3.x显示json数据组件-vue3-json-viewer

    千次阅读 2021-01-28 02:36:53
    在使用vue3+vite开发时,发现需要用到显示json数据组件,发现vue-json-viewer只能兼容vue2,于是花了一个小时,重写的vue3的适配。 原作者:github 代码仓库 GitHub Gitee 安装 需要依赖clipboard,先安装...
  • 1. v-model//使用// data 中 model :false// 子组件DOMexport default {props: {value: { type: Boolean, default: false },},data() {return {};},methods: {ConfirmHandler() {this.$emit("input", false);this.$...
  • 操作父组件修改每个子组件的数据,没能实时更新子组件 1.未解决前的写法 父组件中 <template> <div class="process-parent"> <div class="process-style" v-for="(item, index) in data" :key=...
  • 下载的一个vue构建的后台管理系统,导航栏是一个侧边栏,想在头部里面加一个导航 先是导入要使用的组件 import Hamburger from '@/components/Hamburger' import Nav from '@/components/Nav/index.vue' //自己...
  • vue学习】动态组件和异步组件

    千次阅读 2019-07-24 14:00:35
    动态组件 有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里: is 上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现 <component v-bind:is=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 111,832
精华内容 44,732
关键字:

vue3动态组件显示不出来