vue组件基础

最新推荐文章于 2023-03-08 21:28:14 发布

胖子liu

最新推荐文章于 2023-03-08 21:28:14 发布

阅读量205

点赞数

分类专栏： vue组件文章标签： vue组件

本文链接：https://blog.youkuaiyun.com/LiuPangZi6/article/details/101539760

版权

vue组件专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了Vue.js中全局组件与局部组件的定义方式。通过实例代码展示了如何使用Vue.component注册全局组件，以及在new Vue实例的components选项中定义局部组件。这为开发者提供了在不同场景下灵活运用组件的基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义全局组件

Vue.component(‘组件名’, Vue配置信息{})
template 定义的是显示的html代码，用 `` 来写字符串，方便编写和阅读

Vue.component('my-component',{
    template: `
        <div>
            <div>我是一个全局组件</div>
        </div>
    `
});

局部组件

var app=new Vue({
        el:"#app",
        data:function(){
            return{
                name:"zhangsan"
            }
        },
        components:{
        //privates组件名
            privates:{
                template:`<div>
                <div>这是一个局部组件</div>
                </div>`
            }
        }
    })