深入了解vue组件——从注册到使用

 

一、组件注册

注册组件的组件名有两种方式,可以是my-component-name也可以是MyComponentName全局注册组件要通过Vue.component来创建,然后直接使用,例如:

Vue.component('component-a', { /* ... */ })

另外,还可以局部注册组件,就想定义变量那样:

var ComponentA = { /* ... */ }`

然后在使用的时候:


new Vue({
 el: '#app', 
components: { 
'component-a': ComponentA
})

二、prop

prop对大小写不敏感,所以在prop中使用驼峰的命名法最终会被浏览器解释成全部小写的,所以最好就是使用短横线分隔命名的方式。 为什么在定义prop时要定义好数据的类型?因为这样可以惊醒prop验证,如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 prop是父组件向子组件的单向数据传输,所以不能在子组件中改变prop,因为每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。如果改变了子组件的prop值,Vue 会在浏览器的控制台中发出警告

三、自定义事件

自定义事件的命名建议使用横线分隔命名的方式。因为html是不区分大小写的,所以写在html中的命名全部是小写,这样即使在js中的命名是驼峰的形式,也会对应不上。

四、插槽

1、插槽是什么及定义

插槽是在定义组件的时候,预留给父组件显示额外信息的指令。 比如在父组件中要像一下那样显示内容,在没有插槽的情况下,除了navigation-link组件内容,其他额外的内容都不会在组件名标签内显示。所以中间那段text文本是不会显示的。

但是,如果在定义子组件navigation-link的时候,加入了插槽在文本显示的位置,那这段文本是可以正常显示的。加入的方式如下:


<navigation-link url="/profile"> 
Your Profile 
</navigation-link>

// 定义组件
<a v-bind:href="url" class="nav-link" >
 <slot></slot>
 </a>

2、插槽作用域

因为插槽是父组件中的元素,所以只能使用父组件中的变量和数据,不能使用,也使用不了子组件中的数据。 那如何才能使用子组件中的特性呢? 那就是需要在插槽中绑定子组件的特性prop。例如在子组件中定义插槽时我们可以这样把user特性绑定上去,然后在使用时,需要带一个插槽prop的名字:

<span> 
<slot v-bind:user="user">
  
</slot> 
</span>

<current-user> 
<template v-slot:default="slotProps"> 	 
</template> 
</current-user>

五、处理边界情况

在vue中,最好不要触达另一个组件实例内部或手动操作 DOM 元素,因为这样不大符合vue的简洁的规则容易导致出错,那非要访问要怎么访问? 其实,在每个 new Vue 实例的子组件中,其根实例可以通过 $root 属性进行访问。 例如:

// Vue 根实例 
new Vue({
 data: { foo: 1 }, 
computed: { bar: function () { /* ... */ } }, 
methods: { baz: function () { /* ... */ } } 
})

// 获取根组件的数据 
this.$root.foo 
// 写入根组件的数据 
this.$root.foo = 2 
// 访问根组件的计算属性 
this.$root.bar 
// 调用根组件的方法 
this.$root.baz()

另外也可以通过$parent$refs访问父组件和子组件,使用$refs访问子组件的时候,要给子组件定义一个使用一个类似的 ref 提供对内部这个指定元素的访问。例如:

<input ref="input">
// 子组件的定义

//父组件使用:
methods: { 
// 用来从父级组件聚焦输入框 
focus: function () { 
this.$refs.input.focus()
 } 
}
本文为博主原创文章,知识共享,开源精神,转载注明出处。