vue实现v-model父子组件间的双向通信
Posted he-bo
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue实现v-model父子组件间的双向通信相关的知识,希望对你有一定的参考价值。
首先讲清楚有个缺点:父页面若同时使用多个子组件,永远只会只能实现第一个双向驱动,我是新手,还在研究。如果有高手请指教,感谢!
子组件
<script> export default model: prop: ‘path‘, event: ‘cc‘ , props: label: type: String, default: ‘点击‘, path:String, , methods: btnChange() this.$emit(‘cc‘, res.data) , , </script>
<template> <div> <el-input :value="path" disabled></el-input> <el-button size="small" type="primary" @click="btnChange">label</el-button> </div> </template>
父组件
<template> <div> <subinput v-model="form.text"/> </div> </template> <script> import subinput from ‘@/components/Upload.vue‘ export default components: subinput , data() return activeName: ‘first‘, form: text:‘‘, </script>
以上是关于vue实现v-model父子组件间的双向通信的主要内容,如果未能解决你的问题,请参考以下文章
vue3.x script setup实现v-model父子组件双向绑定
vue组件之间通信 (ref v-model 与.sync修饰符) 之三