前端培训-中级阶段（36）- vue 2.x 组件定义和使用、组件间的通信

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

Vue 组件

组件开发在 Vue 使用中很常见，好处有很多 解耦、并行开发、复用 等等。

使用上也很简单，我们可以对比一下 elementUI 的 el-input 和 原生的 input。

<el-input v-model="val">
<input v-model="val">

注册组件

组件可以理解为可复用的 Vue 实例，所以与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。

全局注册组件

通过 Vue.component 进行全局注册，注册之后可以用任何地方，包括组件树中的所有子组件的模板中。

// 定义一个名为 v-input 的全局组件
Vue.component('v-input', {
  data: function () {
    // data 必须是一个函数
    // 这样才能在多个位置使用时，多个组件不存在引用关系
    return {
      val: ''
    }
  },
  // template 必须有一个根节点。
  // 每个组件必须只有一个根元素(every component must have a single root element )
  template: `
      <div>
        <input v-model="val">
        val: {{val}}.
      </div>
  `
})

局部注册组件

局部注册就是在 components 里面写，只能用在当前组件模板中。

new Vue({
    el: '#app',
    components: {
        'v-input': {
          data: function () {
            // data 必须是一个函数
            // 这样才能在多个位置使用时，多个组件不存在引用关系
            return {
              val: ''
            }
          },
          // template 必须有一个根节点。
          template: `
              <div>
                <input v-model="val">
                val: {{val}}.
              </div>
          `
        }
})

组件通信

父子组件

父组件向子组件传值 props

父组件:

<v-avatar avatar="https://www.lilnong.top/favicon.ico"></v-avatar>

子组件:

Vue.component('v-avatar', {
  props: ['avatar'],
  template: '<img :src="avatar">'
})

子组件向父组件传值 $emit

测试地址：https://www.lilnong.top/static/html/sf-a-1190000022616927-vue-emit.html
父组件:

<v-input :value="val" @input="val = $event"></v-input>

子组件:

Vue.component('v-input', {
    props: ['val'],
    template: '<input :value="val" @input="emitInput">',
    methods:{
        emitInput(e){
            this.$emit('input', e.target.value)
        }
    }
})

使用 v-model

一般在我们使用中 v-model 的方式更常用

<input v-model="val">
<el-input v-model="val"></el-input>

那么 v-model 是如何实现父子组件通信的呢？

原生 DOM
<input v-model="val">
等价于
<input v-bind:value="val" v-on:input="val = $event.target.value" >

自定义组件
<v-input v-model="val"></v-input>
等价于
<v-input :value="val" @input="val = $event"></v-input>

从上面我们可以看到， v-model 类似于语法糖，本质上是通过绑定 value 和 input。

使用 .sync 修饰符

<text-document v-bind:title.sync="doc.title"></text-document>

等价于

<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-document>

子组件中更新时： this.$emit('update:title', newTitle)

在有些情况下，我们需要对一个 prop 进行“双向绑定”。
不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。
推荐以 this.$emit('update:myPropName') 的模式触发事件取而代之。

跨层级

1. vuex
2. eventBus

微信公众号：前端linong

参考文献

1. 前端培训目录、前端培训规划、前端培训计划