Vue父子组件的传参方式

1.父子组件

1.1父传子：子组件通过 props将需要获取传递值的变量展示出来，父组件通过import引入子组件，并通过v-bind绑定需要传递的值

父文件

<template>
    <div>
     <test1 :data1='mgs'></test1>
    </div>
</template>
<script>
  import test1 from '@/components/component/test1.vue'
    export default {
        data() {
            return {
               mgs:'heheheh'
            }
        },
        components:{test1}   
    }
</script>

子文件

<template>
    <div>
       <h1>{{data1}}</h1>
    </div>
</template>

<script>
    export default {
        props:["data1"]
        
    }
</script>

1.2子传父：子组件通过$emit的方式将参数传递给父组件

父文件

<template>
    <div>
       <div>{{mgs}}</div>
       <test1 @fromTest='fromTest'></test1>
    </div>
</template>
<script>
  import test1 from '@/components/component/test1.vue'
    export default {
        data() {
            return {
               mgs:''
            }
        },
        methods:{
           fromTest(data){
               this.mgs=data
           }
        },
    components:{test1}
    }
</script>

子文件

<template>
    <div>
       <button @click="toParent">点击一下</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
               mgs:'我是要传递的值'
            }
        },
        methods:{
            toParent(){
                this.$emit('fromTest',this.mgs)
            }
        } 
    }
</script>