简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

Vue的2.0组件注册详解

php中世界最好的语言
发布： 2018-03-10 13:50:23
原创
1675 人浏览过

这次给大家带来Vue的2.0组件注册详解，Vue的2.0的组件注册的注意事项有哪些，下面就是实战案例，一起来看一下。

//全局注册:

Vue.component("my-component",{template:&#39;<div>A custom component!</div>&#39;});
/*交换位置会报错----创建组件必须在根实例化之前*/
登录后复制

//创建根实例:

new Vue({
 el:"#app"
 })
登录后复制

---------

//局部注册:

new Vue({
el: "#app1",
components: {
// <my-zujian> 将只在父组件模板中可用
&#39;my-zujian&#39;: {
template: &#39;<div>我是局部组件</div>&#39;
}
}
});
登录后复制

//html:

<html>
<head>
    <meta charset="UTF-8" />
    <title>vue2.0组件:</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div>全局组件也必须应用在实例上,不然不显示;</div>
    <hr>
    <div id="app">
        <my-component></my-component>
    </div>
    <div id="app1">
        <my-zujian></my-zujian>
        <my-component></my-component>
    </div>
</body>
</html>
登录后复制

总结: 全局注册的什么地方都可以使用(当然也要是vue管辖范围内);   局部注册的只在挂载当前的元素下可以使用

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

新手学习vue详解

如何解决IE11的css Hack

以上是Vue的2.0组件注册详解的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
注册 组件 详解
来源：php.cn
上一篇：基础的JavaScript知识总结（十一）对象，包装类 下一篇：Vue2 tab切换选项卡的方法
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
Vue项目中未定义模块 我刚刚通过运行npmini tvue@latest创建了一个新的Vue应用程序，如官方文档中指定的那样。然后我尝试按照Vue和Vite网站上的指南将Tailwind添加到我的应用程...
来自于 2023-11-17 12:38:53
0
2
394
Nuxt.js SSG（静态站点生成器）获取API数据 当使用静态站点生成器构建项目时，我理解提前创建的文档是提供给用户的。如果进入页面时有使用axios等获取数据并显示在屏幕上的逻辑，对应的API是被缓存还是不被调用？
来自于 2023-11-16 21:36:07
0
1
176
react中的受控元素怎么理解 react中的受控元素怎么理解？使用state状态控制？react中的受控元素怎么理解？使用state状态控制？
来自于 2023-11-16 14:51:10
0
1
106
解决Django中的django.db.utils.NotSupportedError错误 我在Django中运行项目时遇到错误。问题是不幸的是我升级了我的pip、MySQL客户端和Django版本这是运行pythonmanage.pyrunserver时的错误inche...
来自于 2023-11-14 11:59:20
0
1
246
PHP 修剪 unicode 空格 我正在尝试修剪诸如此字符之类的unicode空格，并且我能够使用此解决方案来做到这一点。此解决方案的问题是它不会修剪普通字符之间的unicode空格。例如这个使用薄空间$strin...
来自于 2023-11-13 08:49:45
0
2
398
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！