vue传值，子传父，父传子

1.vue子组件向父组件传值(父子组件传值)
父组件代码：

//parentFn 在父页面中处理的函数   childFn在子页面【Huati页面】需要处理的函数
<Huati @childFn="parentFn"></Huati>
<script>
    import Huati from "@/components/opt/article/huati"
    export default {
        name: 'voi',
        data() {
            return {
                form: {
                    description:''
                }
            };
        },
        methods: {
            parentFn(payload) {
                //负组件获取子组件的值
                console.log(payload);
                this.form.description = payload
            },
        },
        created() {
        },
        mounted() {
        },
        components: {
            UpLoadFile,
            Huati
        }
    }
</script>

子页面

<template> 
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    // ...
    data() {
        return {
          // 默认
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message); //通过childFn 将值传递给父页面
        }
    }
}
</script>

2.子组件向父组件传值
父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值。

<!-- 父组件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/> 
      子组件传来的值 : {{message}}
    </div>
</template>

<script>
export default {
    // ...
    data() {
        return {
             message: ''
        }
    },
    methods: {
       parentFn(payload) {
        this.message = payload;
      }
    }
}
</script>

子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件。

<!-- 子组件 -->
<template> 
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    // ...
    data() {
        return {
          // 默认
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
        }
    }    
}
</script>