VUE 父元件動態傳值給子元件

目錄

子元件 傳值 父元件 $emit()

父元件 傳值 子元件 props

父元件呼叫子元件的方法動態傳值

---

子元件 傳值 父元件 $emit()

子元件通過this.$emit()傳值

this.$emit('sendMsg', msg);

父元件：

<子元件 @sendMsg="process"></子元件>

methods:{
    process(msg){
        console.log(msg)
    }
}

父元件 傳值 子元件 props

父元件通過 :data 傳值
<子元件 @sendMsg="process" :height="myHeight"></子元件>

export default {
    data(){
        return {
            myHeight: 178
        }
    }
}

子元件：
export default {
    props:{
        height:{
            type:Number //資料型別有 String、Number、Boolean、Array ...
            default: 165 // 預設值
        }
    },
    data(){
        return{
            age: 2
        }
    }
    methods: {
        printHeight(){
            console.log(this.height); // 用法跟在data()中定義一樣
        }
        printAge(){
            console.log(this.age);
        }
    }
}

子元件接收傳值 避免直接改變，因為無論何時父元件都會覆蓋該值。

所以如果父元件動態傳值給子元件，可以採用下面的方式：

父元件呼叫子元件的方法動態傳值

父元件中：
<子元件 @sendMsg="process" ref="child"></子元件>

export default {
    methods:{
        // 傳值
        invokeChildMethod(){
            this.$refs.child.printAge(12)
        }
    }
}

子元件：
export default {
    methods: {
        printAge(age){
            console.log(age); 
        }
    }
}