自定义事件

子组件修改父组件的数据传递一些数据到父组件
通过自定义事件的形式将数据传递过去
自定义事件 @+自定义事件的名称
:="$attrs" 可以指定事件添加到那个标签
接收属性通过 props 接收
接收事件通过 emits
如果事件没有被接收事件默认会被绑定在子组件的根标签上

emits 对象形式

   emits: {
      //  1. 没有任何的验证
      // abc: null,

      //2. 定义事件验证方法 在不满足条件时有警告
      abc(a, b) {
         return a < b
      }
   }

$emit
1. 在实例对象身上有 $emit 可以帮助我们去触发某个事件
2. $emit('事件的名称', arg...) 在$emit 中以参数的形式传递
3. this.$emit('abc', '我是 abc 事件传递的参数', '123')
4. 传递的数据不满足条件就会有警告满足条件就没有警告

组件双向绑定 v-model 实现

通过 v-bind 和 input 事件可以实现组件的数据双向绑定

三种情况

只传属性

html

   <!-- 父组件 -->
   <PropCom1 v-model:num="num" />

   // 父组件
   import PropCom1 from './components/PropCom1.vue'
   export default {
      name: 'App',
      data() {
         return {
            num: 2
         }
      },
      components: {
         PropCom1
      }
   }

html

<!-- 子组件 -->
   {{ num }}
   <input
      type="text"
      :value="num"
      @input="$emit('update:num', $event.target.value)"
   />

   // 子组件
   export default {
      name: 'PropCom1',
      props: ['num'],
      emits: ['update:num']
   }

不传属性使用修饰符

html

   <!-- 父组件 -->
   <PropCom2 v-model.abc="num" />

   // 父组件
   import PropCom2 from './components/PropCom2.vue'
   export default {
      name: 'App',
      data() {
         return {
            num: 2
         }
      },
      components: {
         PropCom2
      }
   }

html

   <!-- 子组件 -->
   {{ modelValue }}
   <input type="text" :value="modelValue" @input="foo" />

   // 子组件
   export default {
      name: 'PropCom1',
      props: {
         modelValue: [Number, String],
         modelModifiers: {
            default() {
            return {}
            }
         }
      },
      emits: ['update:modelValue'],
      methods: {
         foo(e) {
            var val = this.modelModifiers.abc
            ? e.target.value * 1
            : e.target.value
            this.$emit('update:modelValue', val)
         }
      }
   }

既传属性又使用修饰符

html

   <!-- 父组件 -->
   <PropCom3 v-model:num.abc="num" />

   // 父组件
   import PropCom3 from './components/PropCom3.vue'
   export default {
      name: 'App',
      data() {
         return {
            num: 2
         }
      },
      components: {
         PropCom3
      }
   }

html

   <!-- 子组件 -->
   {{ num }}
   <input type="text" :value="num" @input="foo" />

   // 子组件
   export default {
      name: 'PropCom3',
      props: {
         num: [Number, String],
         numModifiers: {
            default() {
            return {}
            }
         }
      },
      emits: ['update:num'],
      methods: {
         foo(e) {
            var val = this.numModifiers.abc
            ? e.target.value * 1
            : e.target.value
            this.$emit('update:num', val)
         }
      }
   }

自定义事件 ​

组件双向绑定 v-model 实现 ​

自定义事件

组件双向绑定 v-model 实现