码迷,mamicode.com
首页 > 其他好文 > 详细

vue实现v-model父子组件间的双向通信

时间:2019-07-03 09:12:40      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:双向   cli   rip   round   for   v-model   isa   span   label   

首先讲清楚有个缺点:父页面若同时使用多个子组件,永远只会只能实现第一个双向驱动,我是新手,还在研究。如果有高手请指教,感谢!

子组件

<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父子组件间的双向通信

标签:双向   cli   rip   round   for   v-model   isa   span   label   

原文地址:https://www.cnblogs.com/he-bo/p/11124066.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!