首页手记 Vue各类组件之间传值的实现方式

Vue各类组件之间传值的实现方式

标签：

JavaScript Vue.js

1、父组件向子组件传值

首先在父组件定义好数据，接着将子组件导入到父组件中。父组件只要在调用子组件的地方使用v-bind指令定义一个属性，并传值在该属性中即可，此时父组件的使命完成，请看下面关键代码：

<div class="parentOne">
  <children-item 
    :content="item" 
    v-for="item in list" 
    :key="item.id"
  >
  </children-item>
</div>

【解析】

上面代码中<children-item></children-item>是导入进来的子组件，content是被v-bind指令定义的属性，当然不用v-bind指令定义也一样可以。只不过加了V-bind指令后，属性值就会被当做JavaScript表达式来解析，而不加v-bind指令就会被当做字符串解析。比如Boolean="false"和:Boolean="false"解析出来的结果是不同滴。如果还是有点迷糊，请来看完整源码

好了，下面我们来看看子组件此时要做的事情是什么？

首先在子组件中要使用关键词props接收父组件传递过来的属性，然后直接对这个属性动手动脚就行了，十分简单，在这直接上完整源码：

<template>
  <div class="ChildrenOne">
    <ul>
      <li v-for="childItem in content">{{childItem}}</li>
      <li>{{message}}</li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'ChildrenOne',
    props: ["content"],
    data() {
      return {
        message: this.content.id
      }
    }
  }
</script>
<style></style>

2、子组件向父组件传值

子组件向父组件传值这一个技术点有个专业名词，叫做“发布订阅模式”，很明显在这里子组件为发布方，而父组件为订阅方。根据这个专业名词，我们来看看子组件里面发生的事情。首先，需要触发子组件视图层里的某个事件，接着由该事件触发的方法中又使用关键方法$emit()发布了一个自定义的事件，并且能够传入相关的参数。子组件所要的事情就只有这么多，下面我们看看核心源码：

ChildrenOnclick() {
  // 发布自定义事件
  this.$emit("delete", this.index)
}

【解析】

上面代码中，当ChildrenOnclick方法被触发的时候，自定义了一个delete事件，并传入了相关参数this.index。这里是完整源码，能帮助你更好的理解。

在父组件中，只要订阅由子组件发布的自定义事件即可。只要子组件的自定义事件被触发，那么父组件就会执行相关的方法，下面是核心代码：

<children-item 
   :content="item" 
   :index="index" 
   v-for="(item, index) in list" 
   :key="item.id" 
   @delete="handleParentClick"
  >
</children-item>

【解析】
上面代码中，@delete是子组件自定义的事件，当该事件在子组件被触发的时候，那么handleParentClick这个方法就会被执行，请看完整的代码，以便更好的理解。

3、兄弟组件传值

这块我还不是灰常明白，只是知道大概如何去实现。首先在由vue-cli搭建起来的项目中的main.js创建一个事件总线，也就是中转站，作为通信的桥梁。核心代码如下：

// 建立中转站，实现组件与组件之间的传值
let bus = new Vue()
Vue.prototype.bus = bus

main.js完整代码请点击哦。

接着我们在发送方组件里面使用关键字$emit()定义一个自定义事件，并传入参数。核心代码如下：

methods: {
  btnMessage() {
    this.bus.$emit("ReceiveMessage", this.message)
  }
}

【解析】
上面代码中，this.bus为在main.js里定义好的一个中转站变量，ReceiveMessage为自定义事件，this.message为定义好的参数，完整代码在此。

最后是接收方组件，只要使用this.bus.$on关键字就能够监听到发送方触发的事件，并在内部通过一个函数接收传入进来的参数，执行相关的动作，下面请看完整代码：

<template>
  <div class="brotherOne">
    <h5>我是接收方组件，下面是接收到的信息</h5>
    <span>{{name}}</span>
  </div>
</template>
<script>
  export default {
    name: 'BrotherTwo',
    data() {
      return {
        name: "我缺爱啊"
      }
    },
    mounted() {
      let self = this;
      this.bus.$on("ReceiveMessage", function(item) {
        self.name = item;
      })
    }
  }
</script>
<style></style>