Vue中最重要的角色组件详解

可复用性的组件详解

使用组件的原因

作用:提高代码的复用性

组件的使用方法

  • 全局注册
  • 优点:所有的Vue实例都可以用
  • 缺点:权限太大,容错率降低
  • 局部注册
  • 注意
    vue组件的模板在某些情况下会受到html标签的限制,比如 中只能还
    ,
    这些元素,所以直接在table中使用组件是无效的,此时可以使用is属性来挂载组件

    组件使用的小技巧

      1. 推荐使用小写字母加­进行命名(必须) child, my­componnet命名组件
      1. template中的内容必须被一个DOM元素包括 ,也可以嵌套
      1. 在组件的定义中,除了template之外的其他选项—data,computed,methods
      1. data必须是一个方法data:function(){}
        小实践:


    使用props传递数据 父亲向儿子传递数据

    1. 在组件中使用props来从父亲组件接收参数,注意,在props中定义的属性,都可以在组件中直接使用
      2. propps来自父级,而组件中data return的数据就是组件自己的数据,两种情况作用域就是组件本身,可以在template,computed,methods中直接使用
    2. props的值有两种,一种是字符串数组,一种是对象,本节先只讲数组
    3. 可以使用v-­bind动态绑定父组件来的内容
      先看个小栗子:
    
     在父组件里向子组件传递消息:
        
    我是父组件

    可以使用v-­bind动态绑定父组件来的内容:小栗子

     在父组件里向子组件传递消息:
        
    我是父组件


    使用v-bind进行数据动态绑定 把input中的msg传递给子组件

    使用不使用v-bind的区别 :

     在父组件里向子组件传递消息:
        
    我是父组件


    v-bind对照试验 传递数组

    使用v-bind进行数据动态绑定 把input中的msg传递给子组件

    单向数据流

    解释 : 通过 props 传递数据 是单向的了, 也就是父组件数据变化时会传递给子组
    件,但是反过来不行。
    目的 :是尽可能将父子组件解耦,避免子组件无意中修改了父组件的状态。
    应用场景: 业务中会经常遇到两种需要改变 prop的情况

    一种是父组件传递初始值进来,子组件将它作为初始值保存起来,在自己的作用域
    下可以随意使用和修改。这种情况可以在组件 data内再声明一个数据,引用父组件的 prop

    • 步骤一:注册组件
    • 步骤二:将父组件的数据传递进来,并在子组件中用props接收
    • 步骤三:将传递进来的数据通过初始值保存起来
      小栗子:
     

    另一种情况就是 prop 作为需要被转变的原始值传入。这种情况用计算属性就可以了

    步骤一:注册组件
    步骤二:将父组件的数据传递进来,并在子组件中用props接收
    步骤三:将传递进来的数据通过计算属性进行重新计算
    小栗子:

     


    数据验证

    vue组件中camelCased(驼峰式) 命名与kebab­case(短横线命名)
    • html中, myMessagemymessage 是一致的,,因此在组件中的html
      中使用必须使用kebab­case(短横线)命名方式。在html中不允许使用驼
      峰!!!!!! (谨记)
    • 在组件中, 父组件给子组件传递数据必须用短横线。在template中,必
      须使用驼峰命名方式,若为短横线的命名方式。则会直接保错。
    • 在组件的data中,用this.XXX引用时,只能是驼峰命名方式。若为短横线
      的命名方式,则会报错。
      小栗子:
     

    验证的 type 类型可以是:

    String
    Number
    Boolean
    Object
    Array
    Function
    栗子:

     

    你可能感兴趣的:(Vue中最重要的角色组件详解)