vue子组件向父组件传值(父子组件传值)

一直都是坐着杂七杂八的混合复杂开发，前端一直都是一知半解的状态。这次趁着项目经验，趁热记录一下。相信后面自己会用到，大家也有可能用到。

父组件代码：

```
//parentFn 在父页面中处理的函数   childFn在子页面【Huati页面】需要处理的函数
<Huati @childFn="parentFn"></Huati>

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>
```

注:原创不易,转载请注明出处( https://micuu.com/new/1090.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

vue子组件向父组件传值(父子组件传值)

留言反馈