Vue组件基础（一）

最新推荐文章于 2024-05-20 01:02:42 发布

yiliujiang

最新推荐文章于 2024-05-20 01:02:42 发布

阅读量173

点赞数

文章标签： Vue 组件

本文链接：https://blog.csdn.net/qq_40152981/article/details/101296186

版权

这篇博客详细介绍了Vue组件的创建，包括全局和局部创建的完整步骤，以及简写方式。此外，还探讨了组件命名的三种情况和规范，特别强调了在特定HTML结构中正确使用组件的注意事项，如使用is属性解决特殊父子级关系问题。

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

Vue组件（一）

下面介绍了注册一个Vue组件的完整步骤

Vue组件创建

全局创建

/创建vue组件的步骤
//1、确定一个模板
const Hello = Vue.extend({
    template:'<div>你好啊</div>'
})

//2、组件注册   Vue中组件的使用方式是类似于标签为了符合H5的规范，那么我们需要将这些类似于标签一样的内容进行注册 注册的作用是为了使用Vue来进行解析
//Vue.component(组件名称，组件配置)

Vue.component('Hello',Hello);

new Vue({
    el:"#app"
})

经过以上两步我们就得到了一个全局的Vue组件，可以在任意一个的Vue的实例中使用

<div id="app">
    <Hello></Hello>
</div>

局部创建

创建vue局部组件的步骤

//1、确定一个模板
const Hello = Vue.extend({
    template:'<div>你好啊</div>'
})
//2、在Vue的实例中注册
new Vue({
    el:"#app",
    components:{
        'Hello':Hello
    }
})

经过这两步就可以得到一个只能在#app范围内使用的局部组件，如果别的Vue实例要想使用，需要在他自己的内部重新注册