父子组件间的消息传递（最常用的方式）

最常用的方式

1. 父组件向子组件传值（绑定属性）：:tosonData="fatherdata"绑定，props接受值

父组件father.vue：

<template>

  <div>

    <div style="margin-top:50px">

        <div>

            父组件：

            <span>展示子组件的值：{{sondata}}</span>

        </div>

        <son :tosonData="fatherdata"></son>

    </div>

  </div>

</template>

<script>

import son from '@/components/son.vue'

export default {

    data() {

        return {

            fatherdata: '我是父组件的值',

            sondata: ''

        }

    },

    components: {

        son

    }

}

</script>

<style>

</style>

子组件son.vue

<template>

    <div style="border:1px solid red">

      子组件:

      <span>接受父组件的值：{{tosonData}}</span>

    </div>

</template>

<script>

export default {

    data() {

        return {

           

        }

    },

    props: {

        tosonData: String

    }

}

</script>

<style>

</style>

1. 子组件向父组件传值（$emit触发自定义事件并传值，父组件绑定该事件接受）

父组件：

<template>

  <div>

    <div style="margin-top:50px">

        <div>

            父组件：

            <span>展示子组件的值：{{sondata}}</span>

        </div>

        <son @tofatherdataHandle="getsondata"></son>

    </div>

  </div>

</template>

<script>

import son from '@/components/son.vue'

export default {

    data() {

        return {

            sondata: ''

        }

    },

    components: {

        son

    },

    methods: {

        getsondata(val) {

            this.sondata = val

        }

    }

}

</script>

<style>

</style>

子组件：

<template>

    <div style="border:1px solid red">

      子组件:

      <Button type="primary" @click="tofatherdataBtn">子组件按钮</Button>

    </div>

</template>

<script>

export default {

    data() {

        return {

            tofatherdata: '我是子组件的值'

        }

    },

    methods: {

        tofatherdataBtn() {

            this.$emit('tofatherdataHandle', this.tofatherdata)

        }

    }

}

</script>

<style>

</style>

使用tihs.$ref.xxx.$on('事件名',回调函数)如果回调不是在methods中