一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第7天,点击查看活动详情。
组件注册
组件可以通过全局注册和本地注册两种方式。全局注册使用应用程序实例的component方法去注册,接收两个参数分别为组件的名字和函数对象或者选项对象。组件的内容使用template去定义。当我们使用组件时,组件的位置显示的就是template的内容。组件注册时一般使用首字母大写的方式去命名。我们需要注意的是组件不能当做闭合元素去使用。全局注册的组件可以在应用程序中任何模板中去使用,但是局部注册组件只能在父组件的模板中使用。
vm.component({ name, define });
组件数据传递
父组件通过prop向子组件传递。动态值的话需要使用v-bind指令,否则接收的是都是静态的字符串值。如果组件传递多个值的话,可以定义一个props为一个数组,将所有的值放到数组中。prop传递数据是单向的,父组件传递给子组件,但是不能够反过来进行传递,防止子组件去更改父组件的状态。也符合vue单向数据流的特点。我们需要注意的是js中对象和数组是通过引用传递的。所以数组或者对象的prop,在子组件中修改的话可能会影响父组件的状态。
props中的每一个参数可以做一个验证,保证父组件传递给子组件的值都是合理的。我们需要注意的是prop验证是在组件实例创建之前,所以实例的属性在default和validator函数中是不可用的。验证的类型可以是原生构造函数的一种也可以是自定义的构造函数。
非prop属性中,当组件返回单个根节点时,非prop的属性将自动添加到根节点的属性中。如果我们不想要组件自动继承属性,可以在组件中设置inheritAttrs属性。禁用属性继承常用于将属性应用于根节点之外的其他元素上,设置后可以使用组件的$attr属性将足尖上设置的属性应用到其他元素上。我们需要注意的是多个根节点和单个根节点是不一样的。如果具有多个根节点的组件是无法自动继承属性,需要显示地在指定的元素上绑定$attrs属性。如果我们不去绑定,那么浏览器会发出警告。
vm.component('btn-wrapper', {
inheritAttrs: false
})