• vue的子组件

  ---

  目录

  1定义：

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

  3组件的使用

  4组件的细节问题

  5组件的命名

  6组件的嵌套

  ---

   

  1定义：

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

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

  3组件的使用

  • 1.编写组件的模板内容

    • <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.组件的使用

    • "app">
          <组件名>
      

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 组件调用: 
  4.组件模板渲染时,必须包含一个根元素 template元素中 必须包含一个顶层的容器元素

6组件的嵌套

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

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

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