vue父子组件传值

Posted 2021-11-09 水星记_

最近在开发过程中遇到项目中有很多地方组件是重复使用的，其实像这种情况我们可以把一些重复操作的组件封装成一个组件通过传参的形式进行使用。

实例

父组件

<template>
    <div class="bottom_list">
    	<!-- //@tab-click="handleClick" 事件方法，用于获取当前点击tab的下标 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="流动检测车" name="second">
                <!-- //<flow></flow>下面注册的组件 -->
                <!-- //:message 绑定data中的indexCode值并传递到子组件 -->
                <flow :message="indexCode"></flow>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    //引入的子组件
    import Flow from '@views/userManagement/userComponen/flow'
    export default {
        name: "index",
        data() {
            return {
                indexCode: "", //要传递的下标
            };
        },
        //一定要注册
        components: {
            Flow
        },
        methods: {
            //点击获取当前tab点击的下标
            handleClick(tab, event) {
                // 将拿到的下标赋值给data中的indexCode
                this.indexCode = tab.index
            },
        }
    }
</script>

子组件

<template>
    <div>
        <!-- //因为在watch中已经将父组件传递的值赋值给data中的subscript，所以我们可以直接拿取data中的subscript的值 -->
        <p>父组件传递过来的值：{{this.subscript}}</p>
    </div>
</template>

<script>
    export default {
        name: "flow",
        data() {
            return {
                subscript: "", //自定义一个空字符串用来赋值
            }
        },
        // props要写在data的下面
        props: {
            // message用于接收
            message: {
                type: String, //验证类型，也可以验证其他类型
                default: "", //如果父组件传值，则用父组件的值渲染，反之使用默认值
            }
        },
        //通过watch来监听父组件传递过来的数据
        watch: {
            // message就是我们要监听的上面props中的message
            message() {
                console.log('从父组件接收到的数据', this.message)
                //将拿到的数据赋值给data中的subscript
                this.subscript = this.message
            }
        },
    }
</script>