# Vue 資訊傳送
###### tags: `教學` `Vue`

## 子組件取用父組件的值
### 父組件

<template>
    <son :test="example"/>
</template>

<script>
export default {
    data() {
        example: null
    }
}
</script>

### 子組件

<script>
export default {
    test: {
        type: String, //放該值的型態
        default: ''  //如果沒有get到的話的預設值
        required: false //是否一定要有傳值
    }
}
</script>

## 父組件取用子組件的值
### 子組件

<script>
    this.$emit('passdata', the_data_u_want_to_pass)
</script>

### 父組件

<template>
    <son @passdata="getdata"/> 子組件$emit的方法要在父組件註冊，父組件會用getdata()的method來處理
</template>

<script>
export default {
    methods: {
        getdata(value) {
            ...
        }
    }
}
</script>

## 父組件更改子組件的值
跟 子組件取用父組件的值 一樣，父組件改值，子組件也會同步變

## 子組件更改父組件的值
跟 父組件取用子組件的值 一樣的方法，$emit到父組件，父組件在用methods去處理

## 父組件啟動子組件的methods
### 父組件

<script>
    this.$emit('activate', if_want_to_pass_data)
</script>

### 子組件

<script>
export default {
    methods: {
        process() {
            ...
        }
    },
    
    mounted() {
        this.$root.$on('activate', (if_have_to_catch_data) => {
            this.process();
        });
    }
}
</script>