📖Vue 组件之间传值的几种方式

前言

在上一篇插槽与组件的文章中我简单的介绍了几种关于传值的方法，现在总结一下Vue中的传值的各种方法

父向子传值：v-bind(属性绑定)

子组件向父组件传值 @on(事件绑定)

EventBus 传值

父向子传值：v-bind(属性绑定)

//父组件(ul.vue)
<template>
  <div>
    <input type="text" name="" v-model='comp_txt'>
    <comp_li :text='comp_txt'></comp_li>
  </div>
</template>
<script>
import comp_li from './vue_comp_li.vue' //引入子组件
export default {
  name: 'App',
  data(){
    return {
        comp_txt:'我是父组件定义的'
    }
  },
  methods:{

  },
  components:{
    comp_li:comp_li //注册标签
  }
}
</script>

//子组件(li.vue)
<template>
  <div>
    {{text}}//输出参数
  </div>
</template>
<script>
export default {
  name: 'App',
  data(){
    return {
        
    }
  },
  props:["text"],//接收传参
}
</script>

子组件向父组件传值@on

//父组件(vue_on_ul.vue)

<template>
  <div>
    <on_li @but_one='on_fun'>{{on_text}}</on_li>
    <p>子组件传过来的值为：{{on_text}}</p>
  </div>
</template>
<script>
import on_li from './vue_on_li.vue' //引入子组件
export default {
  name: 'on_ul',
  data(){
    return {
      on_text:0
    }
  },
  methods:{
    on_fun:function(data){
      this.on_text = data;
    }
  },
  components:{
    on_li:on_li //注册标签
  }
}
</script>

//子组件(vue_on_li.vue)

<template>
  <div>
    <button @click='on_li'>{{number}}</button>
  </div>
</template>
<script>
export default {
  name: 'on_li',
  data(){
    return {
        number:0
    }
  },
  methods:{
    on_li:function(){
      this.number ++;
      this.$emit("but_one",this.number);//传值
    }
  }
}
</script>

EventBus

当程序不需要 Vuex 类型的库来处理组件之间通信的时候就可以考虑使用 EventBus ，EventBus可以在上下组件流畅通行也是因为太方便所以会有很多难维护的麻烦，先讲讲怎么简单的使用 EventBus

你可以选择两种方式在你的项目部署 EventBus，一种是新建个 JS 文件在文件中输入以下内容

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

或者可以通过在 main.js 中直接初始化

// main.js
Vue.prototype.$EventBus = new Vue()

代码演示

//组件A
<template>
  <div>
    <button @click="sendMsg">点击我传值</button>
  </div>
</template>
<script>
import {EventBus} from './event-bus.js'
export default {
  name: 'App',
  data(){
    return {}
  },
  methods:{
    sendMsg:function(){
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}
</script>

//组件B

<template>
  <div>
    <p>{{text}}</p>
  </div>
</template>
<script>
import {EventBus} from './event-bus.js'
export default {
  name: 'enent_li',
  data(){
    return {
        text:''
    }
  },
  mounted(){
      EventBus.$on('aMsg',(msg) => {
      this.text = msg;
    })
  }
}
</script>