vue實現v-model父子組件間的雙向通訊

首先講清楚有個缺點:父頁面若同時使用多個子組件,永遠只會只能實現第一個雙向驅動,我是新手,還在研究。若是有高手請指教,感謝!vue

子組件this

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

父組件spa

<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>
相關文章
相關標籤/搜索