在vue2使用v-model对组件进行双向绑定

• 前端

1. 默认情况

v-model=“visible” 等价于 :value=“visible” 加上 @input=“visible = $event”

所以 v-model 就是父组件向子组件传了个 value 字段的值，子组件使用 props 定义 value 字段， 就可以在子组件使用 value 读取这个值；子组件使用 $emit(‘input’,值) 就可以改变 v-model 的值

父组件

  
    
  



import Tab from "./components/Tab.vue"
export default {
  name: "App",
  data() {
    return {
      visible: true,
    }
  },
  components: { Tab },
}

子组件

  
    我是子组件文字
    
  



export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
}

2. 子组件改变默认字段名与事件

父组件

  
    
  



import Tab from "./components/Tab.vue"
export default {
  name: "App",
  data() {
    return {
      visible: true,
    }
  },
  components: { Tab },
}

子组件

  
    我是子组件文字
    
  



export default {
  model: {
    prop: "show",
    event: "change",
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
}

子组件定义了以下代码就回改变默认字段

    model: {
       prop: "show",
       event: "change",
    }

此时，v-model=“visible” 等价于 :show=“visible” 加上 @change=“visible = $event”

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/5471078e11.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐