Vue组件的传值方式

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、父传子

官网介绍https://cn.vuejs.org/v2/guide/components-props.html
特点：父给子传递的值可以做到响应式，父组件改变值，子组件也会做出相应改变。 子组件不能直接改变接过来的值。配合.sync修饰符可以实现子组件改变数据使父组件也改变

//直接接收值
props: ['zhi'],
//校验接收的类型，如果与定义的不一样会报错
props: {
   
    zhi:{
   
        type:String,
        // 必填
        required:true,
        // 默认值
        default:100,
        //校验函数
        validator:(e)=>{
   
            return e > 10
        }
    }
},

二、子传父

使用$emit向父组件发送信息
特点：准备一个事件处理函数接受发送过来的值，无法做到响应式
methods: {
   
    fashe(){
   
        this.$emit('secdemo',100)  // 指定发射信号
    }
},

// 父组件使用@  接受信号 ， 然后调用本地获取函数