vue的子组件

歪大梨

已于 2022-11-07 19:42:54 修改

阅读量2k

点赞数

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

于 2022-11-07 19:42:30 首次发布

本文链接：https://blog.csdn.net/weixin_64037609/article/details/127737674

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

1定义：

2本质上：组件就是可以重复使用的vue实例

1定义：

组件在vue中是一个很强大的功能,可以对HTML进行扩展,在大型应用中,可以对一些抽象的功能进行封装

2本质上：组件就是可以重复使用的vue实例

3组件的使用

1.编写组件的模板内容

<!--在html中 我们通过template元素  来编写组件的模板内容-->
<template id=“box”>
    html内容
</template>

2.组件的注册
- 组件的注册分为两种方式——局部组件的注册和全局组件的注册

局部组件的注册

//局部组件注册在vue实例对象中  通过vue实例对象的一个配置属性——components
let vm = new Vue({
    components:{
        属性名(组件名):{
            //组件的配置对象
            //除了没有el属性之外 其他配置属性 和 vue实例 完全相同
            //在组件中 我们不使用el来控制组件的挂载  而是使用template 来设置组件的模板内容
            template:"指定template元素的id"//表示当前子组件 使用指定id的template内容作为模板内                                           容
        }
    }
})

全局组件注册

//全局组件注册 通过Vue构造函数的component方法来实现
Vue.component("组件名",{
    //配置对象
})

3.组件的使用

<div id="app">
    <组件名></组件名>
</div>

全局组件和局部组件的区别
- 前者可以在任何vue实例中使用
- 后者只能在当前vue实例中使用

4组件的细节问题

子组件其实就是一个可以复用的vue实例因此其配置方式和 vue实例基本相同唯一就是没有el属性
但是在子组件中配置对象的data属性也比较特殊下面我们就单独来了解一下data属性

在任何子组件中我们配置data属性都必须写成一个函数并在函数中返回data的配置对象

let vm = new Vue({
    data(){
        return {
            //data配置对象
            数据属性名：数据,
            ...
        }
    }
})

之所以要将data写成函数是因为一个vue实例中可以注册多个子组件当我们注册多个子组件的时候每一个子组件中都会存在data属性如果data属性是对象的话就会导致互相冲突因此我们将data的配置对象设置为函数的返回值，这样就可以保证多个子组件之间的data数据不冲突了。

5组件的命名

1.不能使用现有标签作为组件名称: eg:div p img span
2.不能使用现有标签的大小写作为组件名称 eg:Div DIV dIV
3.组件名称建议使大驼峰法进行命名,目的的为了方便书写, 组件的命名：VOne 组件调用: <v-one></v-one>
4.组件模板渲染时,必须包含一个根元素 template元素中 必须包含一个顶层的容器元素