Vue中的局部组件介绍
更新时间：2022年01月24日 14:25:22 作者：huxiaoxiao.
这篇文章主要介绍了Vue中的局部组件，文章围绕Vue局部组件得相关资料展开内容，需要的的小孩伙伴请参考下面文章的具体介绍，希望对你有所帮助
在Vue中我们可以自己定义(注册)局部组件
定义组件名的方式：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
然后在 components 选项中定义你想要使用的组件：
new Vue({
el: '#app',
// 组件中心
components: {
// 在视图层渲染 局部注册组件时
// component-a：你要在视图层调用时使用的名称
// ComponentA： 局部注册组件名称
'component-a': ComponentA,
'component-b': ComponentB
}
})
在视图层调用局部组件：
<div id="app">
<component-a></component-a>
<component-b></component-b>
</div>
举个列子：
<body>
<div id="app">
<component-a></component-a>
<component-b></component-b>
</div>
<script src="./js/vue.js"></script>
<script>
let componentA = {
template:`
<p>我是局部组件1</p>
`
}
let componentB = {
template:`
<p>我是局部组件2</p>
`
}
let vm = new Vue({
el:'#app',
data:{
},
components:{
"component-a":componentA,
"component-b":componentB
}
})
</script>
输出结果为：
相关文章
vue中报错“error‘xxx‘ is defined but never used”问题及解决
介绍了两种解决代码导入问题的方法：单一代码解决和全局解决,第一种方法是在代码前面添加特定代码并保存；第二种方法是在package.json中添加代码后重启项目,这些方法可以有效解决导包错误提示,希望对大家有帮助2024-10-10
Effect几乎是Vue3.0中最重要的一个功能了,计算属性监听函数都是基于effect实现的,下面这篇文章主要给大家介绍了关于vue3中effect函数到底是什么的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue中activated的用法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2021-01-01
在本篇文章里小编给大家整理的是关于vue的keep-alive用法技巧以及实例代码，需要的朋友们学习下。2019-08-08
elementUI el-form 数据无法赋值且不报错解决方法
本文主要介绍了elementUI el-form 数据无法赋值且不报错解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-12-12
本篇文章主要介绍了vue-cli单页应用改成多页应用配置详解，具有一定的参考价值，有兴趣的可以了解一下2017-07-07![Vuex报错之[vuex] unknown mutation type: handlePower问题及解决](//img.jbzj.com/images/xgimg/bcimg6.png)
Vuex报错之[vuex] unknown mutation type: han
这篇文章主要介绍了Vuex报错之[vuex] unknown mutation type: handlePower问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue 登录滑动验证实现代码,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
vue3+ts+vite打包后静态资源404无法加载js和css问题解决办法
这篇文章主要给大家介绍了关于vue3+ts+vite打包后静态资源404无法加载js和css问题的解决办法,文中通过代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue.js中修饰符.stop的用法解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
![Vuex报错之[vuex] unknown mutation type: handlePower问题及解决](http://img.jbzj.com/images/xgimg/bcimg6.png)
最新评论