Vue组件基础

1. 组件注册

组件需要注册后才可以使用。组件有全局注册局部注册两种方式。全局注册后,任何Vue实例都可以使用。

此外,使用components选项可以局部注册组件,注册后的组件只有在该实例作用域下有效。



    

上述代码中的template是DOM结构必须被包含的一个元素,并且其中如果不包含

,组件是无法被渲染的。

执行结果

Vue组件的模板在某些情况下会受到HTML的限制,比如

内规定只允许时
这些表格元素,所以在 内直接使用组件是无效的。这种情况下,需要使用is属性来挂载组件:

除了template选项外,组件中还可以使用如datacomputedmethods等,但使用data时,必须为函数,然后将数据return出去


    

2. props传递数据

在组件中,使用选项props声明来自父组件的数据:



    

props中声明的数据与组件data函数中return的数据主要区别在于,props来自与其父组件,而data中的是组件自己的数据,作用域组件本身,这两种数据都可以在模板template及计算属性computed和方法methods中使用。

有时候,传递的数据不是写死的,而是来自于父组件的动态数据,这时可以使用指令v-bind来动态绑定props的值,当父组件的数据变化时,也会传递给子组件:



    

上述代码中如果这一行不适用v-bind的形式,即:,则执行结果如下:

非v-bind执行结果

而使用v-bind的结果如下:

v-bind执行结果

可见,如果不适用v-bind,则传递的仅仅是固定字符串。

3. props数据验证

可以应用以下选项对数据进行验证:

  • type: 可以是下列原生构造函数中的一种:StringNumberBooleanArrayObjectDateFunctionSymbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型,否则抛出警告。
  • default: any
    为该 prop 指定一个默认值。如果该 prop 没有被传入,则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。
  • required: Boolean
    定义该 prop 是否是必填项。在非生产环境中,如果这个值为 truthy 且该 prop 没有被传入的,则一个控制台警告将会被抛出。
  • validator: Function
    自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下,如果该函数返回一个 falsy 的值 (也就是验证失败),一个控制台警告将会被抛出。

参考

  1. 《Vue.js实战》

你可能感兴趣的:(Vue组件基础)