Vue中父子组件的传值

父组件向子组件传值

A组件内容：

<template>

        <B :thisData="toB"></B>

</template>

<script>

import B from './B.vue';

export default {

    components: { B, },

    data() {

        return {

            toB: ‘我是A传到B的值’,

                }

        }

}

</script>

B组件内容：

<template>

        <span>{{ thisData }}</span>

</template>

<script>

export default {

    props:{ 'thisData' },

}

</script>

此时我们将A组件中的值toB通过自定义属性名thisData传到了B组件，并且在B组件中通过props接收到

子组件向父组件传值并传入方法

B组件内容：

<template>

        <button @click="click">点我</button>

</template>

<script>

export default {

    data(){

        return {

                text:'我是B传到A的内容',

        }

},

    methods:{

                click(){

                        this.$emit("toA",this.text);

                }

        },

}

</script>

A组件内容：

<template>

        <B @toA="toBMethod"></B>

</template>

<script>

import B from './B.vue';

export default {

    components: { B, },

    methods:{

                toBMethod(text){

                        alert(text);

                }

        },

}

</script>

此时我们通过$emit方法将B组件中的text值通过toA传到了A组件并且在A组件的B标签中使用@toA=一个方法来进行对数据的使用，运行顺序：点击按钮，将数据传到A组件并运行toBMethod方法弹出弹窗