Vue中的局部组件

最新推荐文章于 2024-08-20 23:10:52 发布

huxiaoxiao.

最新推荐文章于 2024-08-20 23:10:52 发布

阅读量760

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/lolhuxiaotian/article/details/121509236

版权

vue 专栏收录该内容

65 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在Vue中定义并使用局部组件，包括组件名的定义方式、组件注册到Vue实例的过程，以及在视图层的实际调用示例。通过实例演示了如何创建和使用'component-a'和'component-b'组件。

摘要由CSDN通过智能技术生成

在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>

输出结果为：