vue 组件

Review

v-cloak

解决页面第一次渲染闪烁问题。

通常会结合 css 设置一起使用，

<style> [v-cloak] { display: none; } </style> <div v-cloak> {{ message }} </div>

不会显示，直到编译结束。当创建完 Vue 实例，编译结束后，会自动将页面元素节点中的 v-cloak 属性删除。

组件

组件是 Vue 的核心结构

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例，所在在定义组件时，先定义选项对象。

组件选项对象

{ template: '组件对应的布局结构', // 组件布局模板 data() { // 组件中的 data 必须是函数结构，函数内部返回数据对象 return { } }, computed: {}, methods: {} }

注意，之所以将组件内的 data 属性设置为函数，是因为组件可被复用，各复用的组件实例之间的数据应该是相互独立的。

在 template 模板中，必须是单个根元素的布局结构

注册组件

全局

语法：

Vue.component(组件名称, 选项对象)

全局注册的组件，在所有的 Vue 实例中都可以使用。

注意，通常组件名称使用帕斯卡命名规范（每个单词首字母都大写），但在使用组件名称作为标签名时，需要使用 短横线命名规范（例如，组件名称为 AppHeader ，则标签名应写作：<app-header></app-header>）

局部

语法：

new Vue({ el: '#app', components: { // 局部注册组件 组件名: 选项对象 } })

局部注册的组件仅在其父组件内部可以使用

通过插槽分发内容

<slot>

在定义组件模板时，使用 <slot> 将需要动态替换的节点包裹起来。

命名(具名)插槽：

使用 <slot name=""> 定义命名插槽，

使用 v-slot 指令来引用命名插槽，注意，v-slot 指令只能用于 <template> 元素上

v-slot 指令也有简写方式：#

组件通信

父子：

父 --> 子：利用属性 props 从父组件向子组件传递数据–在父组件中使用到子组件实例时，动态绑定属性传递数据，在子组件定义的选项对象中，使用 props 属性约定其所能接收的属性名称（也可以实现属性类型的判断）。

子 --> 父：通过事件的方式传递。在父组件绑定自定义事件，在子组件中触发该事件的执行。

<father> <son @custom="handler"></son> </father> <script> new Vue({ ....... methods: { handler(param) { console.log(param) } } }) son = { template: ` <button @click="$emit('custom', params)">删除<button> `, data() { return { params: [] } } } </script>

在父组件中使用子组件标签时，利用 v-on 绑定一个自定义事件，在子组件中（一般是去触发原始事件）触发事件时，使用 $emit() 方法来触发父组件中自定义的事件。$emit(自定义事件名称, 传递给事件的数据)，如果没有第二个参数，默认传递的就是事件 event 对象（使用 $event 获取），如果有传递第二个参数，就是将第二个参数数组放到 $event 变量中保存。

在组件上使用 v-model（子级向父级传递数据）：

v-model 相当于是动态绑定 value 属性与绑定 input 事件的语法糖。1. 在自定义组件的内部 <input> 元素上，将 <input > 元素中的 value 属性绑定到组件所接收的 value prop 上；2. 在内部的 <input > 元素上触发在父组件中自定义的 input 事件。在子组件中示例：

<father> <son-component v-model="inputValue"></son-component> </father> <script> son-component = { template: ` <input :value="value" @input="$emit('input', $event.target.value)"> `, props: ['value'] } </script>

跨组件：event-bus

在 vue 中获取 dom 对象使用：

ref

在 dom 元素的标签中添加一个 ref 属性，在组件的 methods 方法中，可以使用 this.$refs 获取所有的 ref 引用，通过 this.$refs.<ref-name> 获取需要使用到的 dom 元素对象，例：

<input ref='inputRef' /> <script> options = { methods: { method() { this.$refs.inputRef.focus() } } } </script>