vue 局部组件 不显示 问题

最新推荐文章于 2024-04-22 21:19:43 发布
最新推荐文章于 2024-04-22 21:19:43 发布
阅读量2.5k 收藏
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/R_DarkNight/article/details/94719066
版权 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例From菜鸟教程改编(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <runoobPart></runoobPart>

</div>

<script>

    var Child = {
        template: '<h1>局部自定义组件</h1>'
    }

    // 创建根实例
    new Vue({
        el: '#app',
        components: {
            // <runoob> 将只在父模板可用
            'runoobPart': Child
        }
    })
</script>
</body>
</html>

我一直很难受为什么解决不了，runoobPart 一直不给替换。

 

解决  局部组件注册名称必须小写。  

R_DarkNight
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
在app.vue里面注册的组件，然后想在首页不显示，需要怎样控制呢？vue切换路由的时候，在哪儿监控路由变化呢？
柠檬不萌只是酸i
10-21 1759
需求是这样的： 除了首页之外，每个页面上都要显示一个【返回的导航栏】。 那么问题来了，怎样控制首页返回导航栏的显示与隐藏呢。 思路： 在【返回的导航栏】组件里面，监听路由的变化，然后在监听里面进行判断即可。 代码： <template> <div id="back" v-if="isShowBack"> <div class="back_bo...
基于Vue全局组件与局部组件的区别说明
10-14
- 局部组件的定义方式与全局组件类似，但不使用`Vue.component`，而是直接在Vue实例的`components`选项中定义，如`components: { fatherlocal: FATHERLOCAL }`，其中`FATHERLOCAL`是局部组件的对象。 3. **组件...
关于Vue组件无法正常显示问题
热门推荐
的博客
05-02 1万+
Vue中Components中的组件不显示 组件流程 1、创建组件 ，在Components中创建组件 2、引入组件，在App组件中导入该组件 3、注册组件，App中的Components中注册 4、使用组件，template中使用 任何一个环节出现了问题都会是的组件内容不显示， 还有一个隐藏的问题，我找了快一个钟头，才找出来 关于组件中文件夹嵌套的引用问题 原因是 没有使用小驼峰命名法 * Header组件名注册无效 => 改成MyHeader名注册则生效 至于什么原因，我不清楚，
Vue全局组件和局部组件
最新发布
dahuabao的博客
04-22 545
props:{
vue页面不显示
weixin_48927323的博客
05-25 5022
-某个页面东西忘记了没写完......--哪里挂载vue上的什么东西干扰到。--检查路由配置，书写书否规范正确。页面死活不显示以及不报任何错误。--查找是否有中文路径。2.不要使用中文路径。
vue局部组件无法显示
Zing_ing的博客
05-15 723
vue 局部组件无法显示 我用的vue版本是2.6.10，vue-cli版本是3.0.4 组件使用全局注册可以正常使用 import VueNavigation from './components/VueNavigation.vue' Vue.component(VueNavigation.name,VueNavigation) 但是注册局部组件时，页面一片空白，并且还提示 We’re sorry but test doesn’t work properly without JavaScript ena
Vue三层嵌套路由页面不显示问题，vue-element-admin三层路由显示空白
coderYYY的博客
11-18 2919
渲染不出来是因为第二层那里缺少一个容器，用一个组件专门用来渲染即可。
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
10-14
如果模板直接包含了多个顶级元素，Vue可能无法正确解析，导致组件不显示。解决方法是在模板外层添加一个包裹元素，如`<div>`： ```html 组件标题 组件内容 ``` 再者，注意组件名的命名规则。Vue中的组件...
深入浅析Vue全局组件与局部组件的区别
08-27
主要介绍了Vue全局组件与局部组件的区别，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue全局组件与局部组件使用方法详解
08-27
Vue 全局组件与局部组件使用方法详解 Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。它的核心特点是声明式渲染和组件系统。在 Vue 中，组件是构建用户界面的基本单元。组件可以分为全局组件和局部...
VUE注册全局组件和局部组件过程解析
10-16
主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue组件嵌套组件不显示
aifans_bert的博客
09-15 1045
对于基于的SPA，下面工具将帮助你：1.视图层：2.路由：vue-router，Vue的官方路由器3.状态管理：vuex，受Flux/Redux启发的状态管理解决方案4.服务通讯：vue-resource这是和RESTful后端交互的接口5.构建工具：Webpack和vue-loader进行模块热刷新ES2015和预处理器等重要的组件视图层本系列假设您已经熟悉的基础知识，将用于大型SPA时的核心概念是：将应用程序分为许多嵌套的自定义组件。虽然NPM开始是后端模块的包管理器，但它现在也广泛用于前端包管理。
vue-router 嵌套子路由无效，不显示页面问题
潜心
10-08 5640
在中大型vue项目中，嵌套路由是避不开的话题。
vue-router 路由嵌套显示不出来_45. Vue路由vuerouter的基本使用
weixin_39715834的博客
11-22 295
前言在使用vue-router之前，首先要认识一下前端路由和后端路由的区别概念。什么是路由「后端路由」:对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；例如：https://www.ximalaya.com/my/subscribed/「前端路由」:对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一...
vue--子组件在嵌套组件时报错问题
weixin_51040108的博客
10-13 1154
vue--子组件在嵌套组件时报错问题
记录vue-router使用嵌套路由，子路由页面不显示问题
danny_799745061的博客
09-09 3137
记录vue-router使用嵌套路由，子路由页面不显示问题
vue组件化and全局组件和局部组件的创建及使用
zhang_dao_shi_的博客
10-04 729
关于vue的组件化，以及全局组件、局部组件的创建和使用 ①组件化 ：首先要简单的理解组件化，这里引用vue官网的一张图 在这里，我们可以将整个页面看作一个根组件，向下分支的三个子组件，分别是页头、侧边栏、内容区。侧边栏里面可以看到有两栏内容，对应右边第二行中间的侧边栏组件又向下分支出两个子组件。所以，对于我们的页面可以看成由大到小，由上到下的组件嵌套，由此就衍生出了类似父子组件，兄弟组件这种组件之间的关系，可以使得整个页面系统化。 ②局部组件与全局组件 再看一张图**以这张图为例子，上面的导航栏组件和左
vue全局组件和局部组件,查看vue挂载的全局组件
神经网络爱好者
09-14 2288
在里进行全局注册Vue.prototype.funcName=function(){}在所有组件里可调用this.funcName();以上这篇vue自定义全局方法,在组件里面的使用介绍就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
vue指定控制挂载区域的两种方法
m0_72795827的博客
11-24 375
vue指定挂载区域的两种方法
vue局部组件
05-26
Vue 中的局部组件是指只在父组件内部使用的组件，而不是全局注册的组件。在 Vue 中，我们可以通过在父组件中使用 `components` 选项来注册局部组件。 例如，我们有一个父组件 `ParentComponent`，它需要使用一个子组件 `ChildComponent`，我们可以在 `ParentComponent` 中使用以下代码来注册 `ChildComponent`： ``` <template> <div> <child-component></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { name: 'ParentComponent', components: { ChildComponent } } </script> ``` 在上面的代码中，我们首先在 `<template>` 标签中使用了 `ChildComponent`，然后在 `<script>` 标签中通过 `import` 引入了 `ChildComponent`，最后在 `components` 选项中将 `ChildComponent` 注册为 `ParentComponent` 的局部组件。 这样，我们就可以在 `ParentComponent` 中使用 `ChildComponent` 了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值