vue自定义组件v-model使用方法

vue自定义组件v-model使用方法

先来看一下vue官方文档  自定义组件的v-model

实际DEMO演示

先写一个最简单的elementUI select封装组件

调用meta-select组件

/ 父组件


data() {
    return {
      selectValue: '选项2',
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        }
      ]
    }
  },

简单介绍

1. 父组件v-model绑定的变量值赋值给子元素接收的prop属性里，子组件绑定值为model.prop中的值

   model: { 
       prop: 'selectValue', 
       event: 'change'
     },

    

2. 当组件触发更改值的事件时（change、input）会触发元素绑定的对应事件，并把新值赋值给父元素绑定的v-model变量

    

3. 子元素中的值更新事件同样可以在父元素中接收到

   
   
   methods:{
     test(value){
       console.log(value)
     }
   }

    

4.