第五篇 组件(上)

全局组件

每个组件有自己独立的数据

• 自定义组件中的属性data必须是个有返回对象的方法，而不像之前一样是个对象
• 全局注册的组件，无论是否引用，都会包含到最终的构建结果中

局部注册的组件

局部注册的组件模块化结构

• 采用es6模块写法要注意：<script>标签要加 type="module"才能识别import这些模块相关的关键字
• 虽然局部组件易于打包，但组件过多会导致大量写import命令也很繁琐，解决方案是利用Vue自动全局注册，具体例子略

组件传参之前的样子

• 自定义组件中methods里的方法也不能使用箭头函数

父子组件传参

• 父子组件通信的属性名字应该出现在：
  • 调用子组件的标签中的属性<desc-view :pushSubDesc="desc"></desc-view>（写到子组件模板内的标签属性里是不行的）
  • 注册子组件时对象的props属性里
  • 子组件模板里可能使用的地方
• 直接修改子组件的属性时，父组件的对应值的值不会被改变，而且会在控制台会报错，因为Prop属性具有“单向下行绑定的特性”

父子同时修改子组件的prop(data)

• 如果要改变传到子组件的值，可以新建子组件data变量，通过watch让父组件传过来的值赋值进来即可

父子同时修改子组件的prop(computed)

• 如果需要对接收到的数据进行二次计算，比如全部转成大写，可以用计算属性

传递的参数类型为对象

• 父组件中要传的参数初始值设为undefined可以在初始化中不向子组件传参，以展示子组件默认值
• 父子组件中可以传递的参数类型有：String,Number,Boolean,Array,Object,Date,Function,Symbol
• 子组件中接收参数时可以验证，验证的类型有：
  • 'null' 允许任何类型
  • [String,Number] 允许多种类型
  • {type:'String',required:true} 必填
  • {type:'Number',default:100} 默认值为100的数字

  • {
        type: Object,
        default: function () {
            return { message: 'hello' }
        }
    }

    对象或数组且一定会从一个工厂函数返回默认值

  • {
        validator: function (value) {
            return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
    }

    这个值必须匹配这些字符串中的一个