vue2组件传值

父传子

vue2组件传值 ------ 父传子

父组件 Parent.vue

<template>
  <div class="parent">
    <Children :msg="message"></Children>
  </div>
</template>
<script>
import Children from '../components/Children'
export default {
  name: 'Parent',
  components: {
      Children
  },
  data() {
      return {
          message:'hello world'
}
},
}
</script>

子组件 Children.vue

<template>
    <section>
        父组件传过来的消息是：{{myMsg}}
    </section>
</template>
<script>
    export default {
        name: "Children",
        components: {},
        props:['msg'],
        data() {
            return {
                myMsg:this.msg
            }
        },
        methods: {}
    }
</script>

子传父

vue2组件传值 ------ 子传父

子组件 Children.vue

<template>
    <section>
        <br>
        <div @click="clickme">click me</div>
    </section>
</template>
<script>
    export default {
        name: "Children",
        components: {},
        data() {
            return {
                childNum:0
            }
        },
        methods: {
            clickme(){
                // 通过自定义事件addNum把值传给父组件
                this.$emit('addNum',this.childNum++)
            }
        }
    }
</script>

父组件 Parent.vue

<template>
    <div class="parent">
        这里是计数：{{parentNum}}
        <Children-Com @addNum="getNum"></Children-Com>
    </div>
</template>
<script>
    import ChildrenCom from '../components/Children'
    export default {
        name: 'Parent',
        components: {
            ChildrenCom
        },
        data() {
            return {
                parentNum: 0
            }
        },
        methods:{
            // childNum是由子组件传入的
            getNum(childNum){
                this.parentNum = childNum
            }
        }
    }
</script>

非父子（兄弟）

vue2组件传值 ------ 非父子

运用自定义事件emit的触发和监听能力，定义一个公共的事件总线eventBus，通过它作为中间桥梁，我们就可以传值给任意组件了。而且通过eventBus的使用，可以加深emit的理解。

1. 创建公用JS文件

   首先得在程序中（src目录下）租块地（创建一个文件夹 utils ），放置这辆bus。
   bus.js的创建十分简单，只要粘贴以下代码：

	import Vue from 'vue';
	export default new Vue;

2. main.js中挂载全局

	import bus from './utils/bus.js'
	Vue.prototype.$bus = bus;

组件A传递

	<button @click="appmsg">bus传递data</button>
	 methods:{
	    appmsg(){
	      this.$bus.$emit('getonbus','App')
	    }
	  }

组件B接收

	mounted(){
	     this.$bus.$on('getonbus', val => {
	      console.log(val)
	    })
	  }

VUE3组件传值 https://blog.youkuaiyun.com/m0_49744220/article/details/132229770

大工搞成，如果对您有帮助，记得点个赞哦 @-@