[1118 | Day61] pass argument between father and son Vue-CLI components

A. Father to son

先写父组件

Parent component

<template>
    <子组件  :子组件的变量名='父组件的变量'> </子组件>         //子组件的变量名前的冒号千万别丢了有和没有是两种意思
</template>

<script>
    .......//没用的内容我省略了 
    data(){
        return {父组件的变量:1}
    }
</script>

Subassembly

<template>
    <inpu type='text' v-model='子标签的变量名'/>
</template>
<script>
    .......//没用的内容我省略了 
    props:['子标签的变量名'] //而不是写data里
</script>

II. The father of the child pass

先写子组件

Subassembly

<template>
    <button @click='子组件的方法'>
        子传父
    </button>
</template>
<script>
    .......//没用的内容我省略了 
    data(){return {子组件变量:1}}
    methods:{
        子组件的方法(){
            this.$emit('父组件中的方法名',this.子组件变量)
        }
    }
</script>

Parent component

<template>
    <button @emit中定义的方法名='父组件的函数'>
        子传父
    </button>
</template>
<script>
.......//没用的内容我省略了 
methods:{
        父组件的函数(msg){
            console.log(msg)   //这里msg就是this.子组件变量
        }
}
</script>