一、父组件向传值子组件

<组件 v-bind:属性=“值”></组件>

父组件传给子组件的值不能改，因为数据流是单向的 父 --> 子

绑定可以传递各种数据类型和解析变量的值，不绑定传过去的就是字符串

子组件接收：两种方式：

1. props["n"]；

2. 子组件对接收数据进行验证：

props：{
    属性:{
        type:类型,
        default:20, //默认值
        required：true, //必须传true或者false
        validator(v){
            return v>20 //布尔表达式，可以写正则
        }, //自定义验证规则
    }
}

例子

<div class="box">
        <child v-bind:a="n"></child>
    </div>
    <script>
        var child = {
            props:{
                a:{
                    type:Number,
                    default:20,
                    required:true,
                    validator(v){
                        return v < 100
                    }
                }
            },
            data(){
                return {
                        b : this.a
                    }
            },
            template:`<div>
                <span>{{b}}</span>
                <button @click="add">++</button>
            </div>`,
            methods:{
                add(){
                    return this.b++
                }
            }
        }
        new Vue({
            el:".box",
            data:{
                n : 1
            },
            components:{
                child
            }
        })
    </script>

二、子组件向父组件传值

例子

<div class="box">
    {{str}}
    <com v-on:msg="recevie($event)"></com>  //2.监听 如果是事件对象 $event可以省略    v-on:自定义事件 = "事件处理函数"
</div>
<script>
    var com = {
        template:`<div>child
            <button @click="sendToParent">发送</button>
        </div>`,
        methods:{
            sendToParent(){
                //msg 自定义事件的名称 123为数据
                this.$emit("msg","123") //1.发送
            }
        }
    }
    new Vue({
        el:".box",
        components:{
            com
        },
        data:{
            str:''
        }
        methods:{
            recevie(e){ // 3.接收 在父组件的methods里，实现这个事件处理函数，参数就会携带子组件传来的数据($event)
                this.str = e
            }
        }
    })
</script>