vuex引入篇--vue组件间通信

最新推荐文章于 2024-05-07 09:27:44 发布

weixin_33736649

最新推荐文章于 2024-05-07 09:27:44 发布

阅读量77

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cd9119ee51d453ae54a2078

版权

前言

vue虽然支持双向绑定，但是组件之间总归而言还是单项的，所以我们在这一片内容之中将会去简单的了解和总结，我们最平常的vue组件之间通信是通过什么样的方式来的。

父子组件通信。

父 --> 子：我们常常使用的props属性就是用来对父子组件进行内容的传递的。

父 --> 孙：

这里我们要注意了，我们可以通过使用props属性来传递。
vue为我们的vueComponent对象提供了$root和 $parent两个属性，分别指向的是根节点的vue对象和父组件的vueComponent对象。这个时候我们通过这两个对象来进行内容的操作。
vue同时为我们提供了依赖注入功能，通过在组件之中设置provide属性，提供给其后代们以某一份数据或者方法来操作当前组件之中的状态信息。子孙组建需要使用的时候只需要使用inject关键字进行内容的注入，然后我们可以通过this来调用注入的方法或者参数。代码可见如下

父组件：
methods:{
    sayHello: function(name){
        console.log('this is ' + name + ' saying hello!')
    }
},

provide() {
    return {
        sayHello: this.sayHello
    }
},

mounted() {
    this.sayHello = function(){
        console.log("saying hello after changed");
    }
}
  
子组件：
inject:['sayHello'],

methods: {
    handleInput (event){
        const value = event.target.value;
        this.sayHello("children");
        this.$emit('input', value);
    }
}
复制代码

p.s：这里我们需要注意一点，使用依赖注入传递的值并不是响应式的，所以我们在父组件之中修改了传递的值的时候，子组件获取的值实际上是没有变化之前的。

以上三种方式或多或少都确立了传递的结构，使得父子组件之间存在一定的耦合，所以我们使用这些方式的时候都需要进行一定的考量，依据自己的需求选择通信的方法。

子 --> 父：vue官方推荐的方式是以事件的形式来进行内容的传递。即父组件之中绑定事件函数，留定传递数值的形参，子组件之中通过$emit来调用传递的方法并且传递改变的值信息。上示例：

parent.vue:

<template>
  <div>
    <AInput @input="inputEvent" :value="inputContent"/>
    <p>{{ inputContent }}</p>
  </div>
</template>
<script>
import AInput from '@/components/Input.vue'

export default {
  name: "state",
  data () {
    return {
      inputContent: "",
    };
  },
  components: {
    AInput
  },
  methods:{
    inputEvent:function(content){
      this.inputContent = content;
    }
  }
}


children.vue：

<template>
  <input @input="handleInput" :value="value"/>
</template>
<script>
export default {
  name: "inputContent",

  props: {
    value:String
  },

  methods: {
    handleInput (event){
      const value = event.target.value;
      this.sayHello(this.name);
      this.$emit('input', value);
    }
  }
}
复制代码

bus

使用Bus来进行装填管理控制，什么是BUS呢，实际上bus就是一个空的vue对象内容。我们先来创建一个BUs:

import Vue from 'vue'

const Bus = new vue();

Vue.prototype.$bus = Bus;
复制代码

之后我们可以在每一个vue对象之中通过this.$bus来获取到当前的这个bus空对象。并使用它来进行内容的通信。举一个简单的例子。

componentOne.vue：

data:() => ({
    content: "check"
}),
methods:{
    passToChild: function(){
        this.$bus.$emit('passTo', this.check);
    }
}


componentTwo.vue：

data:() => ({
    content: "",
}),
mounted() {
    this.$bus.$on('passTo', (content) => {
        this.content = content;
    })    
}
复制代码