【父向子传参一】Vue-cli脚手架创建项目之父组件向子组件传递参数的props方法

Parent.vue文件

<template>
    <div class="parent">
        <p><span>这里是父组件的地盘！！！{{test_value}}</span></p>

        父组件传参的核心位置一：
        <Child :parent_value="value"></Child>
    </div>
</template>

<script>
    import Child from '@/components/test/Child';

    export default {
        name: 'parent',
        data () {
            return {
                value: '这里是父parent组件传的值！'
            };
        },
        父组件传参的核心位置二：
        props: ['parent_value'],
        components: {
            Child
        }
    };
</script>

<style lang="scss">

</style>

Child.vue文件

<template>
    <div class="child">
        <p><span>这里是子组件的地盘！！！{{ parent_value }}</span></p>
    </div>
</template>

<script>
    export default {
        name: 'child',
        data () {
            return {};
        },
        子组件接收参数的核心位置：
        props: ['parent_value']

    };
</script>

<style lang="scss">

</style>