vue中通过v-model给自定义组件绑定属性

父组件内部具体写法：

<template>
  <div class="ex">
    <!-- 通过v-model给子组件绑定属性 -->
    <ex-child v-model="parentVal"></ex-child>
    <div>{{parentVal}}</div>
  </div>
</template>

<script>
import exChild from "../components/exChild.vue"
export default {
  components: {
    exChild
  },
  name: 'Ex',
  data() {
    return {
      parentVal: 1,
    }
  },
  created() {
  },
  methods: {
    
  },
}
</script>

子组件内部写法：

<template>
  <div class="parent">
    <button @click="clickBtn">改变值{{fromParent}}</button>
  </div>
</template>

<script>
export default {
  // 如果不使用model对象重新配置的话props接收到的参数要写成value，如下：
  // props: {
  //   value: {
  //     type: Number,
  //   }
  // },
  model: {
    prop: "childVal",
    event: "changeParentVal"
  },
  props: {
    childVal: {
      type: Number,
    }
  },
  data() {
    return {
      fromParent:0
    }
  },
  created() {
    // 子组件内重新定义属性，初始化时接收从父组件传递过来的值
    this.fromParent=this.childVal;
  },
  methods:{
    // 对子组件内部接收到的值进行修改，通过$emit触发事件，改变父组件内的原始值
    clickBtn(){
      this.fromParent++;
      this.$emit("changeParentVal",this.fromParent)
    }
  }
}
</script>

以上就是vue中通过v-model给子组件传值的大致写法，通过这种方式可以实现父子组件之间的双向数据绑定；