vue的子组件

目录

1定义：

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

3组件的使用

4组件的细节问题

5组件的命名

6组件的嵌套

---

 

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元素中 必须包含一个顶层的容器元素

6组件的嵌套

• 组件的嵌套中 我们需要注意

  • 当a组件 使用在 b组件内部的时候 a组件就是b组件的子组件

  • 这时如果想正常使用 就需要将a组件注册在b组件的内部