vue 组件通信传递参数（父传子）

方法一：

1.定义一个公共组件 MyButton.vue

<template>
    <div>
        <button :class="color">{{ name }}</button>
    </div>
</template>

<script>
export default {
    props: ["name", "color"]
}
</script>

<style lang="scss" scoped>
.seagreen {
    background-color: seagreen;
    color: #fff;
    border: 0;
    padding: 5px 10px;
    width: 120px;
    height: 30px;
    border-radius: 15px;
}

.salmon {
    background-color: salmon;
    color: #acebe2;
    border: 0;
    padding: 5px 10px;
    width: 120px;
    height: 30px;
    border-radius: 15px;
}
</style>

prop 接收的参数

props: ["name", "color"]

子组件接收的地方

<button :class="color">{{ name }}</button>

2.父组件传递参数

            <mybutton name="注册" color="seagreen" />

            <mybutton name="登录" color="salmon" />

效果图：

方法二：（严格模式）

子组件

    props: {
        name: {
            type: String,
            default: "默认按钮"
        },
        color: {
            type: String,
            default: "seagreen"
        }
    },

name，color 表示传递的名称 name:{}里面表示传递的对象的类型和默认值 如果类型不符合就会报错，如果不传递一个值，就会给默认值。

如下示例，父组件操作）

            <mybutton name="注册" color="seagreen" />

            <mybutton />

            <mybutton name="登录" color="salmon" />

效果图

第一个按钮都是传递了参数值，并且类型也是符合的，所以没有报错，第二个按钮没有传递任何值，所以显示了一个默认值