【1118 | Day61】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>