linong
  • 14.6k

前端培训-中级阶段(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 接收相同的选项,例如 datacomputedwatchmethods 以及生命周期钩子等。

全局注册组件

通过 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

clipboard.png

参考文献

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

推荐阅读
javascript-lNong
用户专栏

只此一生,何必从众

806 人关注
101 篇文章
专栏主页
目录