父与子组件之间的传值--Vue

父组件与子组件之间的传值是最基本的vue知识。下面干脆利落介绍一下父组件与子组件的传值。
方法一:父向子组件使用props。子组件向父组件使用emit。是的,就是这么简单!!!

//父组件
<father-component :value-first="abc" :valueSecond=1234 @watchValueStatus="setValueStatus"></father-component>
export default {
    data () {
        return {
        valueStatus: null
        }
    }
    methods: {
        setValueStatus(valueStatus){
        //valueStatus: 子组件传回来的值
            this.valueStatus = valueStatus
        }
    }
}

//子组件
export default {
    props: {
        valueFirst: {
            type: String,
            require: true
        },
        valueSecond: {
            type: Number,
            require: true
        }
    },
    methods: {
        setFatherValue(){
        if(typeOf(this.valueFirst) === string){
            this.$emit('watchValueStatus', true) //实现向父组件传值
        }
        }
    }
}

你可能感兴趣的:(Vue)