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修饰符) 之三

Vue的父子组件v-model双向绑定,父组件修改子组件中绑定的v-model属性

Vue之v-model

Vue组件通信

vue中的组件传值