vue中组件传值的常用方式

方法一 父组件向子组件传值 （props传参）
父组件

<template>
  <div class="container">
    <div>我是父组件</div>
    <Son
      str="字符串"
      :num="5"
      :obj="{ name: '对象信息' }"
      :func="() => {this.list()}"
      :arr="arr"
    ></Son>
  </div>
</template>
<script>
  import Son from './son'
  export default {
    name: 'Father',
    components: { Son },
    data() {
      return {
        arr: [1, 2, 3],
      }
    },
    methods: {
      list() {
        console.log('list')
      },
    },
  }
</script>

子组件

<template>
  <div class="container">
    <div>我是子组件</div>
  </div>
</template>
<script>
  export default {
    name: 'Son',
    props: {
      arr: Array, //定义参数类型
      num: Number,
      str: String,
      str2: {
        type: String,
        default: '默认是字符串', //定义默认值
      },
      func: {
        type: Function,
        require: false, // 定义参数是否必须值
      },
      obj: {
        type: Object,
        require: false,
      },
    },
    created() {
      console.log(this.str) //字符串
      console.log(this.str2) //默认字符串
      console.log(this.num) //5
      console.log(this.arr) //[1,2,3]
      console.log(this.func()) // list
      console.log(this.obj) // name:'对象信息'
    },
  }
</script>

方法二 子组件向父组件传值 （事件传递）
父组件

<template>
  <div class="container">
    <div>我是父组件</div>
    <Son @func="speak" ></Son>
  </div>
</template>
<script>
  import Son from './son'
  export default {
    name: 'Father',
    components: { Son },
   
    methods: {
      speak(msg) {
        console.log(msg) //我是子组件发送的消息
      },
    },
  }
</script>

子组件

<template>
  <div class="container">
    <div>我是子组件</div>
  </div>
</template>
<script>
  export default {
    name: 'Son',
    mounted() {
      this.$emit('func', '我是子组件发送的消息！')
    },
  }
</script>

方法三 事件监听
父组件

<template>
  <div class="container">
    <div>我是父组件</div>
    <Son ref="son" ></Son>
  </div>
</template>
<script>
  import Son from './son'
  export default {
    name: 'Father',
    components: { Son },
   
   mounted() {
     this.$refs['son'].$on('func',(msg)=>{
         console.log(msg);  //我是子组件传递的消息
     })
   }
  }
</script>

子组件

<template>
  <div class="container">
    <div>我是子组件</div>
    <button @click="sendMsg">Send</button>
  </div>
</template>
<script>
  export default {
    name: 'Son',
    methods: {
      sendMsg() {
        this.$emit('func', '我是子组件传递的消息！')
      },
    },
  }
</script>

方法四 消息发布与订阅
安装pubsub-js插件: npm install pubsub-js -s //可实现全局参数传递

组件A

<template>
  <div class="container">
    <div>我是A组件</div>
    <button @click="sendMsg">Send</button>
  </div>
</template>
<script>
  import pubsub from 'pubsub-js'
  export default {
    name: 'A',
    methods: {
      sendMsg() {
        pubsub.publishSync('sendMsg', '这是A组件发布的消息！')
      },
    },
  }
</script>

组件B

<template>
  <div class="container">
    <div>我是B组件</div>
  </div>
</template>
<script>
  import pubsub from 'pubsub-js'
  export default {
    name: 'B',
    mounted() {
      pubsub.subscribe('sendMsg', (e, msg) => {
        console.log(e, msg) //sendMsg 这是A组件发布的消息！
      })
    },
  }
</script>

publishSync 同步发送消息
publish 同步发送消息
subscribe 订阅消息
unsubscribe 卸载特定订阅消息
clearAllSubscriptions 清除所有订阅消息

方法五 非父子组件传值 （EventBus传参）
在main.js中挂载全局EventBus
1.Vue.prototype.$EventBus = new Vue()

组件A

<template>
  <div class="container">
    <div>我是A组件</div>
    <button @click="sendMsg">send</button>
  </div>
</template>
<script>
  import Son from './son'
  export default {
    name: 'A',
    methods: {
      sendMsg() {
        this.$EventBus.$emit('sendMsg','这是A组件发送的消息！')
      }
    }
  }
</script>

组件B

<template>
    <div>
        <div>我是组件B</div>
    </div>
</template>
 
<script>
    export default {
        name: "B",
        mounted(){
            this.$EventBus.$on('sendMsg',(msg)=>{
                console.log(msg);//这是组件A发送的消息！
            })
        },
    }
</script>

通过挂载全局Vue对象传递参数