vue2、uniapp使用v-model的方式传值

使用场景

vue2、uniapp 子组件使用父组件的值并更改父组件的值

父组件

<template>
  /** v-model绑定到子组件的值 **/
  <Search v-model="keyword" />
</template>

<script>
import Search from '../search.vue' // 引入组件
export default {
  components: { Search }, // 注册组件
  data() {
    return {
      keyword: '', // 通过v-model绑定给子组件的值
    }
  },
}
</script>

子组件

<template>
  <div>
    <span>{{ value }}</span>
    <span @click="change">改变父组件的value</span>
    /** 如果想在子组件也通过v-model的方式绑定父组件传入的value **/
    <input v-model='keyword' />
  </div>
</template>

第一种写法（uniapp好像只支持这种写法）

<script>
export default {
  props: { // 接收父组件传递的值
    value: { // 在props里v-model传递的参数默认为value
      type: String,
      default: '',
    },
  },
  methods: {
    change() {
      this.$emit('input', `${this.value}改变了`) // 使用input方法更新value
    }
  },
}
</script>

第二种写法

<script>
export default {
  props: { // 接收父组件传递的值
    value: {
      type: String,
      default: '',
    },
  },
  model: { // 使用model选项 prop指通过v-model接收到的值，event指更新value的方法  可自定义
    prop: 'value', 
    event: 'change'
  },
  methods: {
    change() {
      this.$emit('change', `${this.value}改变了`)
    }
  },
}
</script>

子组件通过v-model绑定父组件传入的value

<script>
export default {
  props: { // 接收父组件传递的值
    value: {
      type: String,
      default: '',
    },
  },
  computed: { // 定义一个新的值比如keyword，使用计算属性的get和set方法，在这个值改变的时候去触发value的更新事件
    keyword: {
      get(){
        return this.value // 返回父组件传入的value
      },
      set(val){ // val指修改后的值
        this.$emit('input', val) // 使用input方法更新value
      }
    }
  }
}
</script>