关于前端:Vue组件通信方式一文搞懂

本文整顿总结了开发中应用频率比拟多的vue组件通信形式，置信无论是面试还是理论开发，总会对你有所帮忙。

Props & $emit

这是应用频率最多、最根底，必须要把握的用法，应用非常简单，用一个helloworld组件示例。

<div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}

数据从父级传递到子级，子级组件读取应用，子级不举荐间接在外部批改props（会导致渲染异样、监听错乱），而应该告诉父组件去更新msg。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="resetMsg">i want change msg</button>
  </div>
</template>

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    resetMsg () {
      this.$emit('update');
    }
  }
}

父组件：

<template>
  <div id="app">
    <HelloWorld :msg="msg" @update="update" />
  </div>
</template>

methods: {
    update () {
      this.msg = "Welcome to my Blog";
    }
  }

$attrs & $listenners

父组件不变，子组件用过$attrs在模板和JS中应用父组件提供的数据，应用$listenners执行父组件内办法（也能够用于跨级组件）。

<template>
  <div class="hello">
    <h1>{{$attrs.msg}}</h1>
    <button @click="resetMsg">i want change msg</button>
  </div>
</template>

export default {
  name: 'HelloWorld',
  methods: {
    resetMsg () {
      this.$listeners.update()
      // this.$emit('update');
    }
  }
}

$children & $parent

父组件内应用 $children 能够拜访子组件列表，依据所在序号找到指定组件，获取数据和办法。

<template>
  <div id="app">
    <HelloWorld />
    <button @click="showMsg">show children msg</button>
    <h1>{{ msg }}</h1>
  </div>
</template>

showMsg () {
    console.log(this.$children)
    this.msg = this.$children[0].msg;
 }

应用$parent获取父组件实例，也就能够间接调用办法和获取数据了，留神：此实例获取形式并非响应式，如果父/子一侧数据变动，之前获取的数据不会刷新！

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <button @click="resetMsg">i want change msg</button>
  </div>
</template>

resetMsg () {
    console.log(this.$parent);
    this.msg = "Welcome to my Blog";
}

provider & inject

在提供数据的组件中表明提供的数据和办法，在子孙组件中inject所需数据和办法。

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

provide: function () {
    return {
      msg: () => this.msg,
      user: this.user,
      reset: this.updateNickName,
      resetMsg: this.updateMsg
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      user: {
        nickName: 'Jack Chen'
      },
    }
  },
  methods: {
    updateNickName () {
      this.user.nickName = "Jet Li";
    },
    updateMsg () {
      this.msg = "Welcome to Your Vue.js Blog";
    }
  }

子/孙级组件：

<template>
  <div class="hello">
    <h1>{{_msg}} {{ user.nickName }}</h1>
    <button @click="resetMsg">reset msg</button>
    <button @click="reset">reset nickName</button>
  </div>
</template>

inject: ['msg','user', 'reset', 'resetMsg'],
  computed: {
    _msg () {
      return this.msg();
    }
  },

同$children和$parent一样，此形式并非百分百响应式，对于根本类型数据，想要它放弃响应式，须要转换为一个函数，返回此变量，在须要应用的组件中，执行办法或者应用计算属性形式。

ref(s)

这种形式更显著地具备父级拜访子级组件的特色，不能纯正算相互通信，只能作为特定场景的应用计划之一。

<template>
  <div id="app">
    <HelloWorld ref="hellowd"/>
    <button @click="getMsg">get msg</button>
    <h2>{{ msg }}</h2>
  </div>
</template>

getMsg () {
  const hellowd = this.$refs['hellowd'];
  this.msg = hellowd.msg;
},
updateMsg () {
  const hellowd = this.$refs['hellowd'];
  hellowd.resetMsg();
}

通过操作发现，只有是通过实例获取的，均非响应式

async & update

<template>
  <div id="app">
    <HelloWorld :msg.sync="msg"/>
    <h2>{{ msg }}</h2>
  </div>
</template>

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <button @click="updateMsg">update msg</button>
  </div>
</template>

updateMsg () {
  this.$emit('update:msg', "Welcome to Your Vue.js Blog");
}

这种更新是响应式的，父组件有援用的中央都会同步更新。

其它形式

• Vuex 数据管理Store
• eventBus 挂载在Vue原型上，应用on监听，emit流传事件
• slot 插槽，次要用于模板解决中
• 本地缓存
• 本人实现一个Store