Vue-cli父子組件之間傳參

一.父傳子(

先寫父組件

父組件

<template>
    <子組件  :子組件的變量名='父組件的變量'> </子組件>         //子組件的變量名前的冒號千萬別丟了有和沒有是兩種意思
</template>

<script>
    .......//沒用的內容我省略了 
    data(){
        return {父組件的變量:1}
    }
</script>

子組件

<template>
    <inpu type='text' v-model='子標籤的變量名'/>
</template>
<script>
    .......//沒用的內容我省略了 
    props:['子標籤的變量名'] //而不是寫data裏
</script>

二.子傳父

先寫子組件

子組件

<template>
    <button @click='子組件的方法'>
        子傳父
    </button>
</template>
<script>
    .......//沒用的內容我省略了 
    data(){return {子組件變量:1}}
    methods:{
        子組件的方法(){
            this.$emit('父組件中的方法名',this.子組件變量)
        }
    }
</script>

父組件

<template>
    <button @emit中定義的方法名='父組件的函數'>
        子傳父
    </button>
</template>
<script>
.......//沒用的內容我省略了 
methods:{
        父組件的函數(msg){
            console.log(msg)   //這裏msg就是this.子組件變量
        }
}
</script>