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

淩亂°似流年 2021-09-18 10:50 213阅读 0赞

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>