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>


输出结果为:

相关文章

  • 解决Element中el-date-picker组件不回填的情况

    解决Element中el-date-picker组件不回填的情况

    这篇文章主要介绍了解决Element中el-date-picker组件不回填的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 浅谈VUE uni-app 生命周期

    浅谈VUE uni-app 生命周期

    这篇文章主要介绍了uni-app 的生命周期,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • 详解vue-cli 构建Vue项目遇到的坑

    详解vue-cli 构建Vue项目遇到的坑

    本篇文章主要介绍了详解vue-cli 构建Vue项目遇到的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue基础之v-bind属性、class和style用法分析

    vue基础之v-bind属性、class和style用法分析

    这篇文章主要介绍了vue基础之v-bind属性、class和style用法,结合实例形式分析了vue.js中v-bind绑定及class、style样式控制相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • vue引入组件的几种方法汇总

    vue引入组件的几种方法汇总

    这篇文章主要介绍了vue引入组件的几种方法汇总,包括常用的局部引入,这里需要注意在哪个页面需要就在那个页面引入、注册、使用,本文结合示例代码给大家介绍的非常详细,需要的朋友参考下吧
    2023-10-10
  • vue侧边栏动态生成下级菜单的方法

    vue侧边栏动态生成下级菜单的方法

    今天小编就为大家分享一篇vue侧边栏动态生成下级菜单的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作实例

    Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作实例

    这篇文章主要介绍了Vue使用axios post方式将表单中的数据以json格式提交给后端接收操作,结合实例形式分析了vue基于axios库post传送表单json格式数据相关操作实现技巧与注意事项,需要的朋友可以参考下
    2023-06-06
  • Element实现动态表格的示例代码

    Element实现动态表格的示例代码

    最近有有个项目,通过选择不同的查询指标展示不同的表格,所以本文就介绍一下Element实现动态表格,具体实现代码记录如下,感兴趣的可以了解一下
    2021-08-08
  • vue模块拖拽实现示例代码

    vue模块拖拽实现示例代码

    这篇文章主要介绍了vue模块拖拽实现示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue+express 构建后台管理系统的示例代码

    vue+express 构建后台管理系统的示例代码

    这篇文章主要介绍了vue+express 构建后台管理系统的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07

最新评论