vue - 父子组件传参

子组件向父组件传参

业务场景

设计一个年龄输入框，我们使用 v-model 绑定年龄字段，显然，年龄输入可能无效，不可能超过 200，因此还有个校验位，校验位如何回传给父组件？

首先排除 ref 方案

就和 html 一样，不到万不得已你不会使用 id，因此也不考虑 ref 的使用。

解决方式

因为 vue 参数是单向传递的，回传自然不可能；

但是可以改变参数类型，原先我们只传递单个数值，直接传递一整个对象（Object），或者一个回调函数（Function）。

Tips：做法就是这么简单粗暴，没什么更好的办法。

传参方式1：v-model

后续盘点一下所有传值方式

<template>
  <!--注意此处的值,要用 computed 之后的值-->
  <input v-model="valueModel"/>
</template>

<script>
    export default {
        name: "form-input"
        , props: {
            value: {type: [Array, String, Number, Date, Boolean]},
        }, model: {
            //需要定义哪一个props可以用v-model绑定属性
            prop: 'value',
            //声明一个事件，调用之后，就会改变父级容器的值
            event: 'handlerValueChange'
        }, computed: {
            valueModel: {
                get: function () {
                    //实际使用的是value值
                    return this.value;
                },
                set: function (val) {
                    //侦听到setter()事件，将值传递回父级组件
                    this.$emit('handlerValueChange', val);
                }
            }
        }
    }
</script>

组件的使用方式和普通输入框基本一致

<template>
    <form-input v-model="formInput.value"></form-input>
</template>

传参方式2：props

<template>
    <el-button @click="click">{{label}}</el-button>
</template>

<script>
/* eslint-disable */

export default {
    name: "Test",
    props: {
        // 父组件需要传递的参数，默认值是 click
        label: {type: String, default: 'click'}
    },
    methods: {
        click: function (){
            // 点击按钮的时候，调用父组件的一个函数
            this.$emit('onClick', {name: xiaoming});
        }
    }

}
</script>

调用方式

<template>
    <!-- 调用子组件，设置好参数和事件  -->
    <test label="按钮" @onClick="onClick"></test>
</template>

<script>
/* eslint-disable */
// 导入自定义组件
import Test from "./Test";

export default {
    name: "Test2",
    // 引用子组件
    components: {Test},
    methods: {
        // 声明一个函数，传递给子组件
        onClick: function (val) {
            console.log(val);
        }
    }
}
</script>

传参方式1：provide

使用前面两种方式传递参数，必须手动进行赋值，才能将父组件的参数，传递给子组件；

但是，有时候，我们并不想显式传递参数，这时候，就可以使用 provide。

• 优点：顶级组件 provider 一次，所有子组件（包括子级的子级）都可以接收到数据；
• 缺点：数据联动效果很糟糕，provider 的数据变化时，不一定会触发数据联动；

案例：

可以查看 element-ui 的 table 设计，table 和 column 一般会同时使用，
我们只把数据传递给了 table 组件，但是 column 明显也获取了我们的数据，
我们并没有看到 table 将数据传递给 column。

父级控件

通过 provide，将自己的参数传递到子级控件。

<script>
    import FormInput from './FormInput.vue'

    export default {
        name: "fast-form"
        , provide() {
            return {
                formGroup: this.formGroup
            };
        }
    ｝      
<script>

子级控件

通过 inject 接收父级传递的参数。

<script>
    export default {
        name: "form-input"
        , inject: ['formGroup']
        , created: function () {
            //给formGroup增加一个事件回调，此处不符合VUE数据单向数据流的设计要求，但是满足普通JS语法
            let currentWidget = this;
            for (let i = 0; i < currentWidget.formGroup.length; i++) {
                if (currentWidget.formGroup[i].name === this.name) {
                    currentWidget.formGroup[i].isValid = function () {
                        return currentWidget.checkFormInputValidity();
                    }
                }
            }
        }, methods: {
            /**
             * 比较当前值是否有效
             */
            checkFormInputValidity: function (value) {
            }
        }
    }        
<script>