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>