vue 父组件和子组件传值/传递事件/调用事件

父子组件关系总结：prop向下传递，事件向上传递。父组件通过prop向子组件下发数据，子组件通过事件向父组件发送信息。
每个vue实例都实现了事件接口：通过$on(eventName)监听事件。使用$emit(eventName,optionalPayload)触发事件。父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。
1，父组件向子组件传值 通过props数组
父组件：

<template>
  <div class="home">
      <HelloWorld @click="helloClick" :sendMsgChild="sendMsgChild" />
	</div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
    data () {
      return {
         sendMsgChild:'向子组件传的值'
      }
    },
    mounted () {

    },
    methods:{
    }
}
</script>

2，子组件

<template>
  <div class="hello">
    <h1 @click="sendMsg">{{ sendMsgChild }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  //校验变量
  // props: {
  //   sendMsgChild:{
  //       type:String,
  //       default:'默认值'
  //   }
  // },
    props:['sendMsgChild'],
  data () {
      return {
      }
  },
  methods:{
  },
  mounted(){

  }
}
</script>
<style scoped>
</style>

2，子组件向父组件传值 通过$emit()触发事件向父组件传值。
父组件：定义一个自定义事件getChildFunc，事件名为getChildFunc，接收子组件传递过来的数据。

<template>
  <div class="home">
      <HelloWorld @click="helloClick" :sendMsgChild="sendMsgChild" @getChildFunc="getChildFunc"/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
    data () {
      return {
         msgChild: '',
         sendMsgChild:'向子组件传的值'
      }
    },
    mounted () {

    },
    methods:{
        helloClick () {
            this.msg = '改变后的值'
        },
        getChildFunc (data) {
            this.msgChild = data
        }
    }
}
</script>

子组件：添加一个click事件，当点击时使用$emit触发事件，将数据传递给父组件

<template>
  <div class="hello">
    <h1 @click="sendMsg"></h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
      return {
        message:'子组件向父组件传的值'
      }
  },
  methods:{
    sendMsg () {
      this.$emit('getChildFunc',this.message)
    }
  },
  mounted(){

  }
}
</script>
<style scoped>
</style>

2，兄弟组件传值：
1，建立一个中间桥梁eventVue.js

import Vue from 'vue'
export default new Vue

2，在兄弟组件一中引入：
兄弟组件一：
第一步：引入eventVue.js

第二步：

<div class="hello">
    <h1 @click="sendMsg">{{ sendMsgChild }}</h1>
  </div>
 

兄弟组件二：

<template>
    <div class="hello">
        <h1>{{meg}}</h1>
    </div>
</template>

<script>
    import bus from '@/js/eventVue'
    export default {
        name: 'child2',
        data () {
            return {
                meg:'获取兄弟组件的值'
            }
        },
        methods:{

        },
        created () {
            bus.$on('sendBrotherFunc',(val) => {
                this.meg = val
            })
        },
        mounted(){

        }
    }
</script>
<style scoped>

</style>

父组件中引入两个组件：

 <HelloWorld @click="helloClick" :sendMsgChild="sendMsgChild" @getChildFunc="getChildFunc"/>
      <child2></child2>

3，父组件调用子组件的事件
子组件：

父组件：$refs 父组件获取子组件实例，进而调用子组件方法或者直接修改子组件属性：

$emit() 子组件调用父组件的方法
1，子组件：

<template>
    <div class="hello">
        <h1>{{meg}}</h1>
        <h2>{{mes}}</h2>
        <button @click="sendFuncs"></button>
    </div>
</template>

<script>
    export default {
        name: 'child2',
        data () {
            return {
                meg:'',
                mes:'子组件属性值'
            }
        },
        methods:{
            sendFunc (meg) {
                this.meg = meg
            },
            //子组件触发父组件方法
            sendFuncs () {
                //第一个参数是父组件监听的事件名，后续参数是父组件方法参数
                this.$emit('toParent','我是子组件的方法')
            }
        },
        created () {
        },
        mounted(){

        }
    }
</script>
<style scoped>

</style>

父组件：

<template>
  <div class="home">
      <child2 @toParent="fromChild" ref="child"></child2>
      <button @click="getChildClick"></button>
  </div>
</template>
<script>
import child2 from '@/components/child2.vue'
export default {
  name: 'home',
  components: {child2},
    data () {
      return {}
    },
    mounted () {},
    methods:{
        getChildClick() {
          this.$refs.child.sendFunc('从父组件传的值')
          this.$refs.child.mes = '父组件改变子组件的值'
        },
        //子组件调用的方法
        fromChild (msg) {
            console.log(msg)
        }
    }
}
</script>