Vue传值

组件时vue.js最强大的功能之一，而组件实例的作用的域是相互独立的，这就意味着不同组件之间的数据无法相互引用。

一：父子组件传值
1、父传子

在父组件的子组件标签上绑定一个属性，挂载要传输的变量
在子组件中通过props来接收数据，props可以是数组也可以是对象

，接受的数据可以直接是props:['属性名']或props:{属性名:数据类型}

// 父组件
<template>
   <div id = 'app'>
     <Child :msg='msg'></mycom>
   </div>
</template>
<script>
import Child from "./components/child"
export default {
  name: 'App',
  data(){
    return{
      msg:" 2 "
    }
  },
  components:{
   Child
  }
}
// 子组件
<template>
   <div id = 'child'> </div>
</template>
<script>
export default {
  name: 'child',
  // 第一种
   props:['msg']
  // 第二种
    props:{
       type:String,
       default:function(){
          return :""
        }
      }
  data(){
    return:{}
  },
}

 

2、子传父

• 在父组件的子组件标签上自定义一个事件，然后调用需要的方法
• 在子组件的方法中通过this.$emit("事件")来触发在父组件中定义的事件，数据是以参数的形式来进行传递的

// 父组件
<template>
   <div id = 'app'>
       // 自定义一个事件
     <Child :msg='msg' @reception='add'></mycom>
   </div>
</template>
<script>
import Child from "./components/child"
export default {
  name: 'App',
  data(){
    return{
      msg:" 2 "
    }
  },
  components:{
     Child
  }
  methods:{
    // 调用方法
    add(data){
        console.log(data)
    }
  }
}
// 子组件
<template>
   <div id = 'child' @click='add()'> </div>
</template 
<script>
export default {
  name: 'child',
  props:['msg']
  data(){
    return{
        child:"Son"
    }
  },
  methods:{
      add(){
          this.$emit('reception',this.child)
      }
  }

二：兄弟组件传参

​ 兄弟之间传值和子传父的方式类似，都是通过$emit事件发射的形式，但是兄弟之间要找一个Vue实例作为媒介，也就是通过一个eventBus事件总线

      在src中新建一个Bus.js文件，然后导出一个空的vue实例
      在传输数据的一方引入Bus.js，然后通过Bus.$emit("事件名","参数")来派发事件，数据是以$emit()的参数来进行传递的
      在接受的数据的一方，引入Bus.js，然后通过Bus.$on("事件名"，(data)=>{data是接受的数据})
创建一个BUS.js文件

// 1、创建事件中心
const eventBus = new Vue();
//2、把创建出来的空的Vue对象挂载到Vue的原型上
Vue.prototype.eventBus = eventBus 
//eventBus【属性名】

 

在组件中引入刚才创建的js

import '@/eventBus.js' 

在methods中定义一个函数

// 在传输的组件中
methods:{
    changesize(){
        eventBus.$emit('add',this.arg)
    }
}
/*
 --------------------------------------------------------------
*/
// 在接收的组件中
created(){
      eventBus.$on('add',(message)=>{
        //message就是从top组件传过来的值
        console.log(message)
    }) 
}

三：ref/refs（父子组件通信）

（1）ref 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，
（2）可以通过实例直接调用组件的方法或访问数据。也算是子组件向父组件传值的一种

//父组件
<template>
  <div>
    <button @click="sayHello">sayHello</button>
    <child ref="childForRef"></child>
  </div>
</template>
<script>
import child from './child.vue'
  export default {
    components: { child },
    data () {
      return {
        childForRef: null,
      }
    },
    mounted() {
      this.childForRef = this.$refs.childForRef;
      console.log(this.childForRef.name);
    },
    methods: {
      sayHello() {
        this.childForRef.sayHello()
      }
    }
  }
</script>
-------------------------------------------------------------------------
//子组件
<template>
  <div>child 内容</div>
</template>
<script>
export default {
  data () {
    return {
      name: '我是 child',
    }
  },
  methods: {
    sayHello () {
      console.log('hello');
      alert('hello');
    }
  }
}
</script>

 

四.Vuex通信

组件通过 dispatch 到 actions，actions 是异步操作，再 actions中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而同步到组件，更新其数据状态

示例：

//父组件
template>
  <div id="app">
    <ChildA/>
    <ChildB/>
  </div>
</template>
<script>
  import ChildA from './ChildA' // 导入A组件
  import ChildB from './ChildB' // 导入B组件
  export default {
    components: {ChildA, ChildB} // 注册组件
  }
</script>

//子组件A
<template>
 <div id="childA">
   <h1>我是A组件</h1>
   <button @click="transform">点我让B组件接收到数据</button>
   <p>因为点了B，所以信息发生了变化：{{BMessage}}</p>
 </div>
</template>
<script>
 export default {
   data() {
     return {
       AMessage: 'Hello，B组件，我是A组件'
     }
   },
   computed: {
     BMessage() {
       // 存储从store里获取的B组件的数据
       return this.$store.state.BMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveAMsg，将A组件的数据存放到store里去
       this.$store.commit('receiveAMsg', {
         AMsg: this.AMessage
       })
     }
   }
 }
</script>

//子组件B
<template>
 <div id="childB">
   <h1>我是B组件</h1>
   <button @click="transform">点我让A组件接收到数据</button>
   <p>点了A，我的信息发生了变化：{{AMessage}}</p>
 </div>
</template>

<script>
 export default {
   data() {
     return {
       BMessage: 'Hello，A组件，我是B组件'
     }
   },
   computed: {
     AMessage() {
       // 存储从store里获取的A组件的数据
       return this.$store.state.AMsg
     }
   },
   methods: {
     transform() {
       // 触发receiveBMsg，将B组件的数据存放到store里去
       this.$store.commit('receiveBMsg', {
         BMsg: this.BMessage
       })
     }
   }
 }
</script>

//vuex
import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 const state = {
   AMsg: '',
   BMsg: ''
 }
 
 const mutations = {
   receiveAMsg(state, payload) {
     // 将A组件的数据存放于state
     state.AMsg = payload.AMsg
   },
   receiveBMsg(state, payload) {
     // 将B组件的数据存放于state
     state.BMsg = payload.BMsg
   }
 }
 
 export default new Vuex.Store({
   state,
   mutations
 })

五：promise传参

promise 中 resolve 如何传递多个参数

//类似这样使用，但实际上后面两个参数无法获取
promise = new Promise((resolve,reject)=>{
    let a = 1
    let b = 2
    let c = 3
    resolve(a,b,c) 
})
promise.then((a,b,c)=>{
    console.log(a,b,c)
})

resolve() 只能接受并处理一个参数，多余的参数会被忽略掉。
如果想多个用数组，或者对象方式。。

数组：

promise = new Promise((resolve,reject)=>{
    resolve([1,2,3]) 
})
promise.then((arr)=>{
    console.log(arr[0],arr[1],arr[2])
})

对象：

promise = new Promise((resolve,reject)=>{
    resolve({a:1,b:2,c:3}) 
})
promise.then(obj=>{
    console.log(obj.a,obj.b,obj.c)
})