zoukankan      html  css  js  c++  java
  • Vue自定义组件通过v-model通信

    model:
    model的类型定义如下,它有两个属性 prop、event

    v-model默认情况如下:

    prop: 默认绑定的是value
    event: 默认触发的事件类型是input

    所以下面可以自己指定类型:

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

    那么在props中就必须指定接收的属性是 checked

    props: {
       value: String,   
       checked: {  //因为在model中使用了prop: 'checked',所以这里必须显示的声明这个变量
           type: Number,
           default: 0
      }
    }

    使用这个组件:

    <my-checkbox v-model="foo" value="some value"></my-checkbox>

    上面代码相当于:

    <my-checkbox
      :checked="foo"
      @change="val => { foo = val }"
      value="some value">
    </my-checkbox>

    完整demo:

    子组件:
    import Vue from 'vue'
    const component = {
      // 使用model对象,定义它的两个属性,就可以在父组件通过v-model实现父子组件双向数据绑定
      model: {
        prop: 'value1', // prop说:我要将value1作为该组件被使用(被父组件调用)时,v-model能取到的值
        event: 'change' // event说:我emit(触发)change的时候,参数的值就是父组件v-model收到的值。
      },
      props: {
        value1: String
      },
      template: `
        <div>
          <span>这里显示的是子组件input的value1值</span>
          <input type="text" @input="handleInput" :value = "value1">
        </div>
      `,
      methods: {
        handleInput (e) {
          this.$emit('change', e.target.value)
        }
      }
    }
    父组件:
    new Vue({
      el: '#root',
      data () {
        return {
          myvalue: '123'
        }
      },
      components: {
        CompOne: component
      },
      template: `
        <div>
          <comp-one v-model="myvalue"></comp-one>  //使用子组件
          <p>这里显示的是父组件的myvalue值:{{myvalue}}</p>
        </div>
      `
    })

     v-model 也可以等于 .sync

  • 相关阅读:
    小波变换的引入,通俗易懂
    Leetcode 437. Path Sum III
    Leetcode 113. Path Sum II
    Leetcode 112 Path Sum
    Leetcode 520 Detect Capital
    Leetcode 443 String Compression
    Leetcode 38 Count and Say
    python中的生成器(generator)总结
    python的random模块及加权随机算法的python实现
    leetcode 24. Swap Nodes in Pairs(链表)
  • 原文地址:https://www.cnblogs.com/gr07/p/10346766.html
Copyright © 2011-2022 走看看