6. Vue组件（基础）

最新推荐文章于 2024-02-08 10:28:07 发布

zhishuiyu

最新推荐文章于 2024-02-08 10:28:07 发布

阅读量829

点赞数

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

本文链接：https://blog.csdn.net/u014258541/article/details/113608548

版权

本文介绍了Vue组件化开发的基础知识，包括组件的基本概念、注册方式（全局与局部）、组件间的数据传递（props与$emit）以及组件切换方法（v-if和is属性）。详细讲解了组件在Vue中的重要地位和使用技巧。

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

一、组件基本概念

Vue可以进行组件化开发，组件是Vue的基本结构单元。在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。
组件主要以页面结构的形式存在，不同组件也具有基本交互功能，根据业务逻辑实现复杂的项目功能。
组件只有注册后才能使用

二、组件注册

2.1 全局注册组件

全局注册组件：Vue.component(id[,definition])

<div id="app">
    <my-component></my-component>
    <my-component></my-component>
    <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //全局注册组件
    Vue.component('my-component',{
    
        data:function () {
    
            return {
    count:0}
        },
        template:'<button v-on:click="count++">被单击{
    {count}}次</button>'
    });


    var vm=new Vue({
    
        el:'#app'
    });
</script>

组件内部具有自己的独立作用域，不能直接被外部访问。所以单击每一个按钮，每个组件都会各自独立维护它的count。因为你每用一次组件，就会有一个它的新实例被创建。

因为组件是可复用的 Vue 实例，所以它们与new Vue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

2.2 局部注册组件

局部注册组件通过Vue实例的components属性来实现的。

<div id="app">
    <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var com1={
    
        template:'<p>我是vm实例中的局部组件</p>'
    };
    var vm=new Vue({
    
        el:'#app',
        components:{
    myComponent:com1}
    });
</script>