Vue组件间通信详解-优快云博客

vue组件传值的方法

父传子

父组件
首先在父组件定义好数据，将子组件导入到父组件中。父组件在调用子组件的地方使用v-bind指令定义一个属性，并传值在该属性中

<div class="parentOne">
  <children-item 
    :content="item" 
    v-for="item in list" 
    :key="item.id"
  >
  </children-item>
</div>
 <children-item>是导入进来的子组件，content是被v-bind指令定义的属性

子组件
在子组件中要使用关键词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>

子传父

首先，需要触发子组件的某个事件，由该事件触发的方法中又使用关键方法$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="ParentClick"
  >
</children-item>

@delete是子组件自定义的事件，当该事件在子组件被触发的时候，那么ParentClick这个方法就会被执行

兄弟传参

在由vue-cli搭建起来的项目中的main.js创建一个事件总线，也就是中转站，作为通信的桥梁。

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

在发送方组件里面使用关键字$emit()定义一个自定义事件，并传入参数。

methods: {
  btnMessage() {
    this.bus.$emit("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: "1111"
      }
    },
    mounted() {
      let self = this;
      this.bus.$on("ReceiveMessage", function(item) {
        self.name = item;
      })
    }
  }
</script>

vuex传值

export default new Vuex.Store({
  state: {
    data:'',// state 中存放的就是全局共享的数据
  },
  mutations: {},
  actions: {},
  getters:{},
})

state提供唯一的公共数据源，所有共享的数据都统一放到store的state中进行存储
组件访问state中数据的第一种方式：

this.$store.state.数据名

组件访问state中数据的第二种方式：

//1。从vuex中按需导入mapState函数
import { mapState } from 'vuex'

通过导入的mapState函数，将当前组件需要的数据映射为当前组件的computed计算属性：

computed:{
	...mapState{['data']}
}

$parent

<div id="app">
    A{{msg}}
    <my-button :msg="msg"></my-button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: '100'
      },
      mounted () {
        console.log(this.$parent, '父') // 没有父组件
        console.log(this.$children, '子') // 99组件
      },
      components: {
        'MyButton': {
          template: `<div>B<my-radio></my-radio></div>`,
          data () {
            return {
              msg: '99'
            }
          },
          mounted () {
            console.log(this.$parent, '父') // 100组件
            console.log(this.$children, '子') // 88组件
          },
          components: {
            'MyRadio': {
              template: `<div>C</div>`,
              data () {
                return {
                  msg: '88'
                }
              },
            },
          },
        },
      }
    })
  </script>

$children 介绍：
当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

$parent 介绍：
当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。

<div id="app">
    A{{msg}}
    <my-button :msg="msg"></my-button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.7/vue.common.dev.js"></script>

  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: '100'
      },
      methods: {
        handleClick () {
          console.log('点击事件')
          this.$children.forEach(child => {
            child.todo()
          })
        }
      },
      components: {
        'MyButton': {
          template: `<div @click="$parent.handleClick">B</div>`,
          data () {
            return {
              msg: '99'
            }
          },
          methods: {
            todo () {
              console.log('todo事件')
            }
          },
        },
      }
    })
  </script>

$children 是一个数组，是直接儿子的集合，关于具体是第几个儿子，那么儿子里面有个 _uid 属性，可以知道他是第几个元素，是元素的唯一标识符，根据这个属性，我们可以进行其他的操作

ref传值

 <!-- 登录弹框显示 -->
    <LodinDialog ref="dia"></LodinDialog>
    //LodinDialog 这是全局组件

  methods: {
   //登录
    useLodin() {
      this.$refs.dia.showDia()
    },
  }
  //通过给全局组件LodinDialog 定义ref 在methods中通过$refs直接获取到组件的所有属性即可调用全局组件LodinDialog中定义好的showDia()方法